ben.carrasco/jambonz-webapp
1
0
Fork 0
mirror of https://github.com/jambonz/jambonz-webapp.git synced 2026-07-04 19:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reorganize some styles

Browse Source
This commit is contained in:
kitajchuk
2022-10-01 16:21:31 -07:00
parent 831a593e99
commit 052ea4d6cb
10 changed files with 114 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/access-control.cy.tsx
+14 -11
View File
@@ -1,6 +1,7 @@
import React from "react";
import { H1 } from "jambonz-ui";
import { MainApp } from "src/main-app";
import { StateProvider } from "src/store";
import { AccessControl } from "./access-control";
import type { ACLProps } from "./access-control";
@@ -8,11 +9,13 @@ import type { ACLProps } from "./access-control";
/** Wrapper to pass different ACLs */
const AccessControlTestWrapper = (props: Partial<ACLProps>) => {
return (
<MainApp>
<StateProvider>
<AccessControl acl={props.acl!}>
<div className="acl-div" />
<div className="acl-div">
<H1>ACL: {props.acl}</H1>
</div>
</AccessControl>
</MainApp>
</StateProvider>
);
};
@@ -21,17 +24,17 @@ describe("<AccessControl>", () => {
cy.mount(<AccessControlTestWrapper acl="hasAdminAuth" />);
});
it("doesn't have teams fqdn ACL", () => {
cy.mount(<AccessControlTestWrapper acl="hasMSTeamsFqdn" />);
/** Default ACL disables MS Teams FQDN */
cy.get(".acl-div").should("not.exist");
});
it("has admin ACL", () => {
cy.mount(<AccessControlTestWrapper acl="hasAdminAuth" />);
/** Default ACL applies admin auth -- the singleton admin user */
cy.get(".acl-div").should("exist");
});
it("has doesn't have teams fqdn ACL", () => {
cy.mount(<AccessControlTestWrapper acl="hasMSTeamsFqdn" />);
/** Default ACL disables MS Teams FQDN */
cy.get(".acl-div").should("not.exist");
});
});
src/containers/internal/styles.scss
+1
View File
@@ -3,6 +3,7 @@
@use "jambonz-ui/src/styles/vars" as ui-vars;
@use "jambonz-ui/src/styles/mixins" as ui-mixins;
/** Generic layout: internal */
.internal {
display: flex;
src/containers/login/create-password.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ export const CreatePassword = () => {
return (
<>
<H1 className="h2">Create password</H1>
<form onSubmit={handleSubmit}>
<form className="form form--login" onSubmit={handleSubmit}>
<M>You must create a new password</M>
<Passwd
locked
src/containers/login/login.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export const Login = () => {
return (
<>
<H1 className="h2">Log in</H1>
<form onSubmit={handleSubmit}>
<form className="form form--login" onSubmit={handleSubmit}>
<input
required
type="text"
src/containers/login/styles.scss
+1 -33
View File
@@ -3,6 +3,7 @@
@use "jambonz-ui/src/styles/vars" as ui-vars;
@use "jambonz-ui/src/styles/mixins" as ui-mixins;
/** Generic layout: login */
.login {
width: 100vw;
height: 100vh;
@@ -47,37 +48,4 @@
}
}
}
form {
margin-top: ui-vars.$px04;
width: 100%;
max-width: ui-vars.$width-small;
background-color: ui-vars.$white;
padding: ui-vars.$px03;
border-radius: ui-vars.$px02;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
color: ui-vars.$dark;
@include mixins.small() {
padding: ui-vars.$px02;
}
> * + * {
margin-top: ui-vars.$px02;
}
> input,
> button {
width: 100%;
}
}
.msg {
width: 100%;
justify-content: center;
}
}
src/main-app.tsx
-18
View File
@@ -1,18 +0,0 @@
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { StateProvider } from "./store";
import { AuthProvider } from "./router/auth";
/** Export `MainApp` so it can be used in Cypress component tests */
export const MainApp = ({ children }: { children: React.ReactNode }) => {
return (
<React.StrictMode>
<StateProvider>
<BrowserRouter>
<AuthProvider>{children}</AuthProvider>
</BrowserRouter>
</StateProvider>
</React.StrictMode>
);
};
src/main.tsx
+12 -4
View File
@@ -1,7 +1,9 @@
import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { MainApp } from "./main-app";
import { StateProvider } from "./store";
import { AuthProvider } from "./router/auth";
import { Router } from "./router";
import "./styles/index.scss";
@@ -9,7 +11,13 @@ import "./styles/index.scss";
const root: Element = document.getElementById("root")!;
createRoot(root).render(
<MainApp>
<Router />
</MainApp>
<React.StrictMode>
<StateProvider>
<BrowserRouter>
<AuthProvider>
<Router />
</AuthProvider>
</BrowserRouter>
</StateProvider>
</React.StrictMode>
);
src/styles/_filters.scss
+36
View File
@@ -0,0 +1,36 @@
@use "./mixins";
@use "jambonz-ui/src/styles/vars" as ui-vars;
.filters {
display: flex;
padding-top: ui-vars.$px03;
padding-bottom: ui-vars.$px03;
&--ender {
justify-content: flex-end;
}
&--spaced {
justify-content: space-between;
@include mixins.small() {
overflow-x: auto;
white-space: nowrap;
grid-gap: ui-vars.$px02;
}
}
&--multi {
overflow-x: auto;
white-space: nowrap;
grid-gap: ui-vars.$px02;
> :first-child {
margin-left: auto;
}
}
+ * {
margin-top: 0;
}
}
src/styles/_forms.scss
+33
View File
@@ -37,6 +37,39 @@ fieldset {
}
.form {
&--login {
margin-top: ui-vars.$px04;
width: 100%;
max-width: ui-vars.$width-small;
background-color: ui-vars.$white;
padding: ui-vars.$px03;
border-radius: ui-vars.$px02;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
color: ui-vars.$dark;
@include mixins.small() {
padding: ui-vars.$px02;
}
> * + * {
margin-top: ui-vars.$px02;
}
> input,
> button {
width: 100%;
}
.msg {
width: 100%;
justify-content: center;
}
}
&--internal {
> * + * {
@include mixins.formline();
src/styles/index.scss
+15 -48
View File
@@ -3,6 +3,7 @@
@use "./lists";
@use "./smsel";
@use "./inpbtn";
@use "./filters";
@use "jambonz-ui/src/styles/index";
@use "./vars";
@@ -11,23 +12,11 @@
@use "jambonz-ui/src/styles/mixins" as ui-mixins;
/** Root custom vars */
:root {
--mobile-media: #{vars.$widthbreak};
}
/** Could go in jambonz-ui */
.txt--dark {
color: ui-vars.$dark;
}
.txt--jean {
color: vars.$jeangrey;
}
/** Global things */
/** Global elements */
pre,
code {
@include mixins.code();
@@ -102,6 +91,15 @@ details {
}
}
/** Could go in jambonz-ui */
.txt--dark {
color: ui-vars.$dark;
}
.txt--jean {
color: vars.$jeangrey;
}
/** The idea is this is like [type="button"] generically */
/** We need to prohibit some jambonz-ui buttons from submitting forms */
/** Otherwise this selector would just be `button[type="button"] {...}` */
@@ -126,12 +124,14 @@ details {
}
}
/** Small inline spinners */
.ispin {
display: flex;
align-items: center;
grid-gap: ui-vars.$px01;
}
/** Internal page titles */
.mast {
display: flex;
align-items: center;
@@ -142,6 +142,7 @@ details {
}
}
/** Used on phone numbers list */
.mass-edit {
padding: ui-vars.$px00 0;
@@ -150,41 +151,7 @@ details {
}
}
.filters {
display: flex;
padding-top: ui-vars.$px03;
padding-bottom: ui-vars.$px03;
&--ender {
justify-content: flex-end;
}
&--spaced {
justify-content: space-between;
@include mixins.small() {
overflow-x: auto;
white-space: nowrap;
grid-gap: ui-vars.$px02;
}
}
&--multi {
overflow-x: auto;
white-space: nowrap;
grid-gap: ui-vars.$px02;
> :first-child {
margin-left: auto;
}
}
+ * {
margin-top: 0;
}
}
/** Used for reccent-calls */
/** Used for recent-calls */
.pre-grid {
@include mixins.code();
display: grid;