style: change classnames code style (#24)

pure-js · Oct 21, 2023 · 8d664e3 · 8d664e3
1 parent 8ad61b9
commit 8d664e3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 19 deletions.
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -32,13 +32,11 @@ export const Button = ({
   className,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? classes['btn--primary'] : classes['btn--secondary'];
+  const mode = primary ? classes.primary : '';
   return (
     <button
       type="button"
-      className={[className, classes.btn, classes[`btn--${size}`], mode].join(
-        ' ',
-      )}
+      className={[className, classes.btn, classes[size], mode].join(' ')}
       disabled={isDisabled}
       {...props}
     >

diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
@@ -2,9 +2,12 @@
   transition: opacity 0.3s;
   cursor: pointer;
   box-sizing: border-box;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
   border: 0;
-  border-radius: 3em;
+  border-radius: 2em;
+  background-color: transparent; // secondary
   width: 100%;
+  color: #333; // secondary
   font-weight: 700;
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
@@ -15,27 +18,26 @@
   &:disabled {
     filter: invert(75%);
     cursor: not-allowed;
+
+    &:hover {
+      opacity: inherit;
+    }
   }
 
-  &--primary {
+  &.primary {
     background-color: #1ea7fd;
     color: white;
   }
-  &--secondary {
-    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-    background-color: transparent;
-    color: #333;
-  }
 
-  &--small {
+  &.small {
     padding: 10px 16px;
     font-size: 12px;
   }
-  &--medium {
+  &.medium {
     padding: 11px 20px;
     font-size: 14px;
   }
-  &--large {
+  &.large {
     padding: 12px 24px;
     font-size: 16px;
   }

diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
@@ -7,7 +7,10 @@ interface FormProps {
 }
 
 export const Form = ({ onSubmit, children }: PropsWithChildren<FormProps>) => (
-  <form onSubmit={onSubmit} className={classes.form}>
+  <form
+    onSubmit={onSubmit}
+    className={[classes.form, classes.container].join(' ')}
+  >
     {children}
   </form>
 );
diff --git a/src/components/form/form.module.scss b/src/components/form/form.module.scss
@@ -2,8 +2,14 @@
   display: flex;
   flex-direction: column;
   align-self: center;
-  gap: 1rem;
+  gap: 3rem;
+  box-sizing: border-box;
   margin: 0 auto;
   width: 100%;
   max-width: 20rem;
 }
+
+.container {
+  padding-right: max(env(safe-area-inset-right, 1rem), 1rem);
+  padding-left: max(env(safe-area-inset-left, 1rem), 1rem);
+}
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -22,14 +22,16 @@ export const Input = ({
   size = 'medium',
 }: InputProps) => (
   <>
-    <label htmlFor={id} className={`${classes.label} ${classes[size]}`}>
-      <span className={`${classes.labelText} ${classes[size]}`}>{label}</span>
+    <label htmlFor={id} className={[classes.label, classes[size]].join(' ')}>
+      <span className={[classes.labelText, classes[size]].join(' ')}>
+        {label}
+      </span>
       <input
         id={id}
         autoFocus={autoFocus}
         minLength={minLength}
         placeholder={placeholder}
-        className={`${classes.input} ${classes[size]}`}
+        className={[classes.input, classes[size]].join(' ')}
         type={type}
       />
     </label>