feat(home page): changes home page inputs and cards (#26)

changes appearance of cards and inputs on the home page accordingly with figma references closes #25 Co-authored-by: Asman Umbetov <[email protected]>
fastndead · Dec 17, 2023 · 475774b · 475774b
1 parent 8ef0165
commit 475774b
Show file tree

Hide file tree

Showing 19 changed files with 263 additions and 161 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,19 +1,12 @@
 module.exports = {
-  extends: ['stylelint-config-standard'],
+  extends: ['stylelint-config-standard', 'stylelint-config-tailwindcss"'],
   // add your custom config here
   // https://stylelint.io/user-guide/configuration
   rules: {
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: [
-          'apply',
-          'layer',
-          'responsive',
-          'screen',
-          'tailwind',
-          'variants',
-        ],
+        ignoreAtRules: ['apply', 'layer', 'responsive', 'screen', 'tailwind', 'variants'],
       },
     ],
     'no-descending-specificity': null,

diff --git a/client/assets/cardSecondaryBackground.svg b/client/assets/cardSecondaryBackground.svg
diff --git a/client/assets/logo.svg b/client/assets/logo.svg
diff --git a/client/components/Button/Button.css b/client/components/Button/Button.css
@@ -0,0 +1,48 @@
+@tailwind components;
+
+@layer components {
+  .btn-primary {
+    & button {
+      @apply bg-primary-emphasis text-white;
+    }
+    &:hover {
+      & .upper-side, .right-side {
+        @apply bg-secondary-dark transition-all;
+      }
+    }
+  }
+
+  .btn-secondary {
+    & button {
+      @apply bg-secondary-light text-primary-emphasis;
+    }
+    &:hover {
+      & .upper-side, .right-side {
+        @apply bg-primary-emphasis transition-all;
+      }
+    }
+  }
+
+  .btn-base {
+    & > .upper-side {
+      @apply border border-black border-solid border-b-0 border-r-0;
+      transform: skewX(135deg) translateX(11px);
+      height: 22px;
+      width: calc(100% - 22px);
+    }
+
+    & .right-side-container {
+      @apply flex flex-row; 
+    }
+
+    & .right-side {
+      @apply border border-black border-solid border-l-0;
+      transform: skewY(135deg) translateY(-11px);
+      width: 24px;
+    }
+
+    & button {
+      @apply outline-0 text-2xl px-6 py-3 block w-full p-2.5 border border-solid border-black;
+    }
+  }
+}
diff --git a/client/components/Button/index.tsx b/client/components/Button/index.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import './Button.css'
 import React from 'react'
 
 type Props = {
@@ -8,18 +9,29 @@ type Props = {
   onClick?(): void
   className?: string
 }
-export default function Button({ htmlType, type, label, onClick, className }:Props) {
+export default function Button({ htmlType, type, label, onClick, className }: Props) {
   return (
-    <button
-      onClick={onClick}
-      type={htmlType || 'button'}
-      className={classNames({
-        'btn-primary': type === 'primary',
-        'btn-secondary': type === 'secondary',
-      }) + ' ' + className}
-      tabIndex={0}
+    <div
+      className={
+        classNames({
+          'btn-primary': type === 'primary',
+          'btn-secondary': type === 'secondary',
+        }) +
+        ' btn-base ' +
+        className
+      }
     >
-      {label}
-    </button>
+      <div className='upper-side'></div>
+      <div className='right-side-container'>
+        <button
+          onClick={onClick}
+          type={htmlType || 'button'}
+          tabIndex={0}
+        >
+          {label}
+        </button>
+        <div className='right-side'></div>
+      </div>
+    </div>
   )
 }
diff --git a/client/components/Sidebar/index.tsx b/client/components/Sidebar/index.tsx
@@ -19,7 +19,7 @@ export default function Sidebar() {
   const areSettingsImplemented = false
 
   return (
-    <div className='inset-0 left-0 top-0 z-50 h-screen w-20 overflow-hidden bg-primary-idle'>
+    <div className='fixed inset-0 left-0 top-0 z-50 h-screen w-20 overflow-hidden bg-primary-idle'>
       <div className='mt-20 flex w-full flex-col items-center'>
         <Link to='/'>
           <IconButton

diff --git a/client/components/TextInput/Input.css b/client/components/TextInput/Input.css
@@ -0,0 +1,34 @@
+
+@tailwind components;
+
+@layer components {
+  .text-input {
+    & > .upper-side {
+      @apply border border-solid border-grey;
+      transform: skewX(135deg) translateX(12px) translateY(1px);
+      height: 22px;
+      width: calc(100% - 22px);
+    }
+
+    & .right-side-container {
+      @apply flex flex-row; 
+    }
+
+    & .right-side {
+      @apply border border-solid border-grey;
+      transform: skewY(135deg) translateY(-11px) translateX(-1px);
+      width: 23px;
+    }
+
+    & input {
+      @apply border border-solid border-grey text-2xl px-6 py-3 block w-full p-2.5 box-border text-center outline-none transition-all;
+    }
+  }
+
+    .text-input-danger {
+    & input {
+      @apply shadow-danger placeholder-danger focus:shadow-danger;
+    }
+    }
+
+}
diff --git a/client/components/TextInput/index.tsx b/client/components/TextInput/index.tsx
@@ -2,6 +2,7 @@ import { useSpring, animated } from '@react-spring/web'
 import { config } from '@react-spring/web'
 import classNames from 'classnames'
 import React, { ReactEventHandler } from 'react'
+import './Input.css'
 
 type Props = {
   placeholder: string
@@ -21,20 +22,18 @@ export default function TextInput({
   const [validationErrorSpring] = useSpring(() => {
     return validationError
       ? {
-        from: { opacity: 0, height: 0 },
-        to: { opacity: 1, height: 30 },
-        config: config.stiff,
-      }
+          from: { opacity: 0, height: 0 },
+          to: { opacity: 1, height: 30 },
+          config: config.stiff,
+        }
       : {
-        from: { opacity: 1, height: 30 },
-        to: { opacity: 0, height: 0 },
-        config: config.stiff,
-      }
+          from: { opacity: 1, height: 30 },
+          to: { opacity: 0, height: 0 },
+          config: config.stiff,
+        }
   }, [validationError])
   return (
-    <div
-      className={className}
-    >
+    <div className={classNames('text-input', className)}>
       <animated.div
         className='w-full text-center text-sm text-danger'
         style={{
@@ -43,15 +42,19 @@ export default function TextInput({
       >
         {validationError || ''}
       </animated.div>
-      <input
-        placeholder={placeholder}
-        onChange={onChange}
-        value={value}
-        className={classNames('text-input', 'border-none', 'outline-none', 'text-black', {
-          'text-input-danger': validationError,
-        })}
-        tabIndex={0}
-      />
+      <div className='upper-side'></div>
+      <div className='right-side-container'>
+        <input
+          placeholder={placeholder}
+          onChange={onChange}
+          value={value}
+          className={classNames('border-none', 'outline-none', 'text-black', {
+            'text-input-danger': validationError,
+          })}
+          tabIndex={0}
+        />
+        <div className='right-side'></div>
+      </div>
     </div>
   )
 }
diff --git a/client/index.css b/client/index.css
@@ -32,35 +32,36 @@ code {
 @tailwind utilities;
 
 @layer components {
-  .btn-primary {
-    @apply bg-primary-idle placeholder-white outline-0 text-white text-2xl px-14 py-4 rounded-3xl hover:shadow-button-primary-emphasis hover:shadow-primary-emphasis transition-shadow block w-full p-2.5;
-  }
-
-  .btn-secondary {
-    @apply bg-secondary-idle placeholder-white outline-0 text-primary-emphasis text-2xl px-14 py-4 rounded-3xl hover:shadow-button-primary-emphasis hover:shadow-primary-emphasis transition-shadow block w-full p-2.5;
-  }
-
   .card {
     @apply rounded-lg bg-secondary-emphasis border border-solid border-primary-emphasis;
 
     height: 80px;
     width: 50px;
   }
 
-  .text-input {
-    @apply shadow-input-border shadow-grey text-2xl px-14 py-4 rounded-3xl block w-full p-2.5 box-border text-center border-none outline-none focus:shadow-primary-emphasis focus:shadow-input-border-hover hover:shadow-input-border-hover hover:shadow-primary-emphasis transition-all;
-  }
-
-    .text-input-danger {
-    @apply shadow-input-border shadow-danger text-2xl px-14 py-4 rounded-3xl block w-full p-2.5 box-border text-center border-none outline-none placeholder-danger focus:shadow-danger focus:shadow-input-border-hover hover:shadow-input-border-hover hover:shadow-danger transition-all;
-    }
-
   .emphasis-text {
     font-family: Bangers;
     color: white;
     text-shadow: 2px 1px 1px #2C4DA8;
     -webkit-text-stroke-width: 1px;
     -webkit-text-stroke-color: #7893DC;
   }
+
+  .card-background {
+    background: url('./assets/cardBackground.svg');
+    background-size: cover;
+    background-color: #E7ECFC;
+  }
+
+  .card-secondary-background {
+    background: url('./assets/cardSecondaryBackground.svg');
+    background-size: cover;
+    background-color: #E7ECFC;
+  }
+
+  .base-background {
+    background: url('./assets/background.svg');
+    background-size: cover;
+  }
 }