From 052ea4d6cb79b2bd55218bfcb738624d28ae471a Mon Sep 17 00:00:00 2001 From: kitajchuk Date: Sat, 1 Oct 2022 16:21:31 -0700 Subject: [PATCH] Reorganize some styles --- src/components/access-control.cy.tsx | 25 +++++----- src/containers/internal/styles.scss | 1 + src/containers/login/create-password.tsx | 2 +- src/containers/login/login.tsx | 2 +- src/containers/login/styles.scss | 34 +------------ src/main-app.tsx | 18 ------- src/main.tsx | 16 ++++-- src/styles/_filters.scss | 36 ++++++++++++++ src/styles/_forms.scss | 33 +++++++++++++ src/styles/index.scss | 63 ++++++------------------ 10 files changed, 114 insertions(+), 116 deletions(-) delete mode 100644 src/main-app.tsx create mode 100644 src/styles/_filters.scss diff --git a/src/components/access-control.cy.tsx b/src/components/access-control.cy.tsx index ac3a3bd..013d44b 100644 --- a/src/components/access-control.cy.tsx +++ b/src/components/access-control.cy.tsx @@ -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) => { return ( - + -
+
+

ACL: {props.acl}

+
- + ); }; @@ -21,17 +24,17 @@ describe("", () => { cy.mount(); }); + it("doesn't have teams fqdn ACL", () => { + cy.mount(); + + /** Default ACL disables MS Teams FQDN */ + cy.get(".acl-div").should("not.exist"); + }); + it("has admin ACL", () => { cy.mount(); /** 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(); - - /** Default ACL disables MS Teams FQDN */ - cy.get(".acl-div").should("not.exist"); - }); }); diff --git a/src/containers/internal/styles.scss b/src/containers/internal/styles.scss index 8db3c47..c66ece4 100644 --- a/src/containers/internal/styles.scss +++ b/src/containers/internal/styles.scss @@ -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; diff --git a/src/containers/login/create-password.tsx b/src/containers/login/create-password.tsx index 1304137..15f0c25 100644 --- a/src/containers/login/create-password.tsx +++ b/src/containers/login/create-password.tsx @@ -80,7 +80,7 @@ export const CreatePassword = () => { return ( <>

Create password

-
+ You must create a new password { return ( <>

Log in

- + * + * { - margin-top: ui-vars.$px02; - } - - > input, - > button { - width: 100%; - } - } - - .msg { - width: 100%; - justify-content: center; - } } diff --git a/src/main-app.tsx b/src/main-app.tsx deleted file mode 100644 index 56fb771..0000000 --- a/src/main-app.tsx +++ /dev/null @@ -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 ( - - - - {children} - - - - ); -}; diff --git a/src/main.tsx b/src/main.tsx index fef8adc..058b443 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -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( - - - + + + + + + + + + ); diff --git a/src/styles/_filters.scss b/src/styles/_filters.scss new file mode 100644 index 0000000..a3e32b2 --- /dev/null +++ b/src/styles/_filters.scss @@ -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; + } +} diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index 7077805..7e6960d 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -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(); diff --git a/src/styles/index.scss b/src/styles/index.scss index 4ad5651..32241e1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -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;