From f0acd48dc1f5fbb7ab6c2b81b4f42f23bc0416a0 Mon Sep 17 00:00:00 2001 From: dewanshDT Date: Fri, 18 Aug 2023 01:30:43 +0530 Subject: [PATCH 1/5] made the style changes --- client/styles/components/_form-container.scss | 33 ++++++++++++------- client/styles/components/_forms.scss | 21 +++++++----- 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss index aebe0cdc73..53835c3eed 100644 --- a/client/styles/components/_form-container.scss +++ b/client/styles/components/_form-container.scss @@ -2,24 +2,29 @@ text-align: center; display: flex; flex-direction: column; - align-items: center; + align-items: center; justify-content: center; flex: 1; + + @media (max-width: 550px) { + text-align: left; + justify-content: start; + } } .form-container--align-left { - text-align: left; + text-align: left; } .form-container--align-top { - height: unset; + height: unset; } .form-container__header { width: 100%; padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem; display: flex; - justify-content: space-between; + justify-content: space-between; } .form-container__content { @@ -31,28 +36,32 @@ } .form-container--align-left .form-container__content { - align-items: left; + align-items: left; } .form-container__title { font-weight: normal; @include themify() { - color: getThemifyVariable('form-title-color') - } + color: getThemifyVariable("form-title-color"); + } + + @media (max-width: 770px) { + display: none; + } } .form-container__context { - @include themify() { - color: getThemifyVariable('secondary-text-color') - } + @include themify() { + color: getThemifyVariable("secondary-text-color"); + } } .form-container__divider { - padding: #{20 / $base-font-size}rem 0; + padding: #{20 / $base-font-size}rem 0; } .form-container__logo-button { - @include icon(); + @include icon(); } .form-container__exit-button { diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss index ae755eb894..d5eca026d8 100644 --- a/client/styles/components/_forms.scss +++ b/client/styles/components/_forms.scss @@ -5,7 +5,7 @@ font-size: #{12 / $base-font-size}rem; text-align: left; @include themify() { - color: getThemifyVariable('error-color'); + color: getThemifyVariable("error-color"); } } @@ -27,11 +27,16 @@ margin-top: #{16 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem; @include themify() { - color: getThemifyVariable('form-navigation-options-color'); + color: getThemifyVariable("form-navigation-options-color"); + } + + @media (max-width: 550px) { + text-align: center; + margin: #{12 / $base-font-size}rem; } } -.form__legend{ +.form__legend { font-size: #{21 / $base-font-size}rem; font-weight: bold; } @@ -42,7 +47,7 @@ margin-bottom: #{7 / $base-font-size}rem; display: block; @include themify() { - color: getThemifyVariable('form-secondary-title-color'); + color: getThemifyVariable("form-secondary-title-color"); } } @@ -56,8 +61,8 @@ height: #{40 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem; @include themify() { - color: getThemifyVariable('form-input-text-color'); - background-color: getThemifyVariable('input-background-color'); + color: getThemifyVariable("form-input-text-color"); + background-color: getThemifyVariable("input-background-color"); } } @@ -67,7 +72,7 @@ .form__input::placeholder { @include themify() { - color: getThemifyVariable('form-input-placeholder-text-color'); + color: getThemifyVariable("form-input-placeholder-text-color"); } } @@ -78,7 +83,7 @@ .form__status { @include themify() { - color: getThemifyVariable('form-navigation-options-color'); + color: getThemifyVariable("form-navigation-options-color"); } } From 8112233d5c49149288369b6f62af79e53a1e9567 Mon Sep 17 00:00:00 2001 From: dewanshDT Date: Fri, 18 Aug 2023 01:50:37 +0530 Subject: [PATCH 2/5] the header cross --- client/common/icons.jsx | 4 +- client/images/cross.svg | 3 + .../IDE/components/Header/MobileNav.jsx | 55 +++++++++++++------ 3 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 client/images/cross.svg diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 571dec3a74..37a4f1cebc 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -24,6 +24,7 @@ import Folder from '../images/folder-padded.svg'; import CircleTerminal from '../images/circle-terminal.svg'; import CircleFolder from '../images/circle-folder.svg'; import CircleInfo from '../images/circle-info.svg'; +import Cross from '../images/cross.svg'; // HOC that adds the right web accessibility props // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html @@ -94,9 +95,8 @@ export const MoreIcon = withLabel(More); export const TerminalIcon = withLabel(Terminal); export const CodeIcon = withLabel(Code); export const SaveIcon = withLabel(Save); - export const FolderIcon = withLabel(Folder); - +export const crossIcon = withLabel(Cross); export const CircleTerminalIcon = withLabel(CircleTerminal); export const CircleFolderIcon = withLabel(CircleFolder); export const CircleInfoIcon = withLabel(CircleInfo); diff --git a/client/images/cross.svg b/client/images/cross.svg new file mode 100644 index 0000000000..f84379208a --- /dev/null +++ b/client/images/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx index 00840be084..94d4581f00 100644 --- a/client/modules/IDE/components/Header/MobileNav.jsx +++ b/client/modules/IDE/components/Header/MobileNav.jsx @@ -13,7 +13,14 @@ import NavMenuItem from '../../../../components/Nav/NavMenuItem'; import { prop, remSize } from '../../../../theme'; import AsteriskIcon from '../../../../images/p5-asterisk.svg'; import IconButton from '../../../../components/mobile/IconButton'; -import { AccountIcon, EditorIcon, MoreIcon } from '../../../../common/icons'; +import { + AccountIcon, + EditorIcon, + MoreIcon, + CloseIcon, + ExitIcon, + crossIcon +} from '../../../../common/icons'; import { newFile, newFolder, @@ -237,26 +244,40 @@ const MobileNav = () => {
by {project?.owner?.username}
)} - - {user.authenticated ? ( - - ) : ( -
- - - -
- )} - {title === project.name ? ( - - ) : ( + + {/* check if the user is in login page */} + {pathname === '/login' || pathname === '/signup' ? ( + // showing the login page +
- +
- )} - + + ) : ( + + {/* checking if user is logged in or not */} + {user.authenticated ? ( + + ) : ( +
+ + + +
+ )} + {title === project.name ? ( + + ) : ( +
+ + + +
+ )} + + )} ); }; From 82d51a9517fe5601f384798e0bee76b5f4d0e370 Mon Sep 17 00:00:00 2001 From: dewanshDT Date: Fri, 18 Aug 2023 04:18:20 +0530 Subject: [PATCH 3/5] snapshots --- .../Header/__snapshots__/Nav.unit.test.jsx.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap index cea033295f..ccae1b7f13 100644 --- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap +++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap @@ -48,15 +48,15 @@ exports[`Nav renders dashboard version for mobile 1`] = `