From 262620b1801ec106aceecef91aeff45d1f3eb121 Mon Sep 17 00:00:00 2001 From: Muhun Kim Date: Mon, 11 May 2020 12:15:42 +0900 Subject: [PATCH 1/5] Update to New Squaremorphism UI --- src/app/components/Input.tsx | 15 ++++++++++----- src/app/components/Submit.tsx | 5 +++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx index e661693..1b159ae 100644 --- a/src/app/components/Input.tsx +++ b/src/app/components/Input.tsx @@ -2,7 +2,12 @@ import { h, JSX } from 'preact' import { User, Lock, Eye, EyeOff } from 'preact-feather' import { Input as OriginalInput } from '../../styles/components/Input' -import { darken_ultra, darken_medium, invaild } from '../../styles/colors' +import { + darken_ultra, + darken_medium, + invaild, + white, +} from '../../styles/colors' import { css, cx } from 'linaria' import { styled } from 'linaria/react' import { useState } from 'preact/hooks' @@ -13,10 +18,10 @@ const LoginOutside = styled.div>` padding-top: 5px; padding-bottom: 5px; background-color: ${darken_ultra}; - box-shadow: 0 0 0 2px ${props => (props.isWrong ? invaild.outside : '')}; - border: solid 1px ${props => (props.isWrong ? invaild.inside : 'transparent')}; - transition: ${props => (props.isWrong ? 'border 0.5s' : '')}; - transition: ${props => (props.isWrong ? 'box-shadow 0.5s' : '')}; + box-shadow: inset 2px 2px 12px + ${props => (props.isWrong ? invaild.inside : '#dadeeb')}, + inset -5px -5px 8px ${props => (props.isWrong ? invaild.outside : white)}; + transition: box-shadow 0.2s ease-in-out; ` const Icon = css` diff --git a/src/app/components/Submit.tsx b/src/app/components/Submit.tsx index 3afb6ee..f4dcb3b 100644 --- a/src/app/components/Submit.tsx +++ b/src/app/components/Submit.tsx @@ -13,6 +13,11 @@ const SubmitButton = styled.button` cursor: pointer; width: 178px; align-self: center; + box-shadow: 0 10px 24px 0 ${primary}; + transition: box-shadow 0.2s ease-in-out; + :hover { + box-shadow: 0 3px 10px 0 ${primary}; + } ` const Text = styled.span` From 720a1772d5bf75453ec9733ac859c32f209888bd Mon Sep 17 00:00:00 2001 From: Muhun Kim Date: Mon, 11 May 2020 17:35:57 +0900 Subject: [PATCH 2/5] Implement focus style --- src/app/components/Input.tsx | 15 ++++++++++++--- src/styles/colors.ts | 1 + 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx index 1b159ae..12af26d 100644 --- a/src/app/components/Input.tsx +++ b/src/app/components/Input.tsx @@ -7,6 +7,8 @@ import { darken_medium, invaild, white, + innerShadow, + innerShadow, } from '../../styles/colors' import { css, cx } from 'linaria' import { styled } from 'linaria/react' @@ -18,10 +20,17 @@ const LoginOutside = styled.div>` padding-top: 5px; padding-bottom: 5px; background-color: ${darken_ultra}; - box-shadow: inset 2px 2px 12px - ${props => (props.isWrong ? invaild.inside : '#dadeeb')}, - inset -5px -5px 8px ${props => (props.isWrong ? invaild.outside : white)}; + box-shadow: inset 2px 2px 12px 0 + ${props => (props.isWrong ? invaild.outside : white)}, + inset -5px -5px 8px 0 + ${props => (props.isWrong ? invaild.inside : innerShadow)}; transition: box-shadow 0.2s ease-in-out; + &:focus-within { + box-shadow: inset 2px 2px 12px 0 + ${props => (props.isWrong ? invaild.outside : white)}, + inset -8px -8px 15px 0 + ${props => (props.isWrong ? invaild.inside : innerShadow)}; + } ` const Icon = css` diff --git a/src/styles/colors.ts b/src/styles/colors.ts index b64fc1f..100314f 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -10,6 +10,7 @@ export const transparent = 'rgba(0, 0, 0, 0)' export const background = '#f7f7f7' export const mainBoxShadow = 'rgba(21, 19, 19, 0.07)' +export const innerShadow = '#dadeeb' export const valid = { outside: 'rgba(186, 231, 255, 0.65)', From f25c933ad0c93e7fa8c72766651e9d2db3eaec2f Mon Sep 17 00:00:00 2001 From: Muhun Kim Date: Mon, 11 May 2020 17:38:57 +0900 Subject: [PATCH 3/5] Fix typo Fix invalid spelling --- src/app/components/Input.tsx | 11 +++++------ src/styles/colors.ts | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx index 12af26d..758db73 100644 --- a/src/app/components/Input.tsx +++ b/src/app/components/Input.tsx @@ -5,10 +5,9 @@ import { Input as OriginalInput } from '../../styles/components/Input' import { darken_ultra, darken_medium, - invaild, + invalid, white, innerShadow, - innerShadow, } from '../../styles/colors' import { css, cx } from 'linaria' import { styled } from 'linaria/react' @@ -21,15 +20,15 @@ const LoginOutside = styled.div>` padding-bottom: 5px; background-color: ${darken_ultra}; box-shadow: inset 2px 2px 12px 0 - ${props => (props.isWrong ? invaild.outside : white)}, + ${props => (props.isWrong ? invalid.outside : white)}, inset -5px -5px 8px 0 - ${props => (props.isWrong ? invaild.inside : innerShadow)}; + ${props => (props.isWrong ? invalid.inside : innerShadow)}; transition: box-shadow 0.2s ease-in-out; &:focus-within { box-shadow: inset 2px 2px 12px 0 - ${props => (props.isWrong ? invaild.outside : white)}, + ${props => (props.isWrong ? invalid.outside : white)}, inset -8px -8px 15px 0 - ${props => (props.isWrong ? invaild.inside : innerShadow)}; + ${props => (props.isWrong ? invalid.inside : innerShadow)}; } ` diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 100314f..07f0a10 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -17,7 +17,7 @@ export const valid = { inside: 'rgba(64, 169, 255, 0.65)', } -export const invaild = { +export const invalid = { outside: 'rgba(244, 179, 187, 0.65)', inside: 'rgba(229, 27, 52, 0.65)', } From 754cc9f9ba74ed82923d9168d755b0f9adbfae96 Mon Sep 17 00:00:00 2001 From: Muhun Kim Date: Mon, 11 May 2020 17:41:17 +0900 Subject: [PATCH 4/5] Swap invalid props value --- src/styles/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 07f0a10..2823f44 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -18,8 +18,8 @@ export const valid = { } export const invalid = { - outside: 'rgba(244, 179, 187, 0.65)', - inside: 'rgba(229, 27, 52, 0.65)', + outside: 'rgba(229, 27, 52, 0.65)', + inside: 'rgba(244, 179, 187, 0.65)', } export const green = 'rgba(82, 196, 26, 0.85)' From 9289ecd30bbb2133981b6ac3539e256238b61858 Mon Sep 17 00:00:00 2001 From: Muhun Kim Date: Mon, 11 May 2020 17:43:46 +0900 Subject: [PATCH 5/5] Update Main Box style --- src/styles/components/Box.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/components/Box.ts b/src/styles/components/Box.ts index 603c39e..3ea9de2 100644 --- a/src/styles/components/Box.ts +++ b/src/styles/components/Box.ts @@ -6,14 +6,14 @@ export const Root = `display: flex; justify-content: center; width: 100vw; heigh export const Template = ` display: flex; flex-direction: column; - box-shadow: 15px 19px 32px -18px ${mainBoxShadow}; + box-shadow: 0 19px 32px 20px ${mainBoxShadow}; background-color: ${white}; ` export const Box = styled.div` ${Template} width: 430px; - border-radius: 15px; + border-radius: 50px; align-self: center; padding: 61px 32px 91px 32px; `