Update to New Squaremorphism UI

src/app/components/Input.tsx

@@ -2,7 +2,13 @@ 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,
+  invalid,
+  white,
+  innerShadow,
+} from '../../styles/colors'
 import { css, cx } from 'linaria'
 import { styled } from 'linaria/react'
 import { useState } from 'preact/hooks'
@@ -13,10 +19,17 @@ const LoginOutside = styled.div<IsWrong & JSX.HTMLAttributes<HTMLDivElement>>`
   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 0
+      ${props => (props.isWrong ? invalid.outside : white)},
+    inset -5px -5px 8px 0
+      ${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 ? invalid.outside : white)},
+      inset -8px -8px 15px 0
+        ${props => (props.isWrong ? invalid.inside : innerShadow)};
+  }
 `
 
 const Icon = css`

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`

src/styles/colors.ts

@@ -10,15 +10,16 @@ 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)',
   inside: 'rgba(64, 169, 255, 0.65)',
 }
 
-export const invaild = {
-  outside: 'rgba(244, 179, 187, 0.65)',
-  inside: 'rgba(229, 27, 52, 0.65)',
+export const invalid = {
+  outside: 'rgba(229, 27, 52, 0.65)',
+  inside: 'rgba(244, 179, 187, 0.65)',
 }
 
 export const green = 'rgba(82, 196, 26, 0.85)'

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;
 `