fix: ui issues

src/components/form_input/index.module.scss

@@ -18,6 +18,10 @@
   transition: all 0.3s ease-in-out;
   width: calc(100% - 36px);
 
+  &.fullWidth {
+    width: 100%;
+  }
+
   &:focus {
     border-color: $color-indigo-2;
   }

src/components/form_input/index.tsx

@@ -1,9 +1,18 @@
 import * as styles from "./index.module.scss";
 
-type Props = React.InputHTMLAttributes<HTMLInputElement>;
+type Props = React.InputHTMLAttributes<HTMLInputElement> & {
+  fullWidth?: boolean;
+};
 
-const FormInput = ({ className, ...props }: Props) => (
-  <input {...props} className={[styles.input, className].join(" ")} />
+const FormInput = ({ className, fullWidth, ...props }: Props) => (
+  <input
+    {...props}
+    className={[
+      styles.input,
+      fullWidth ? styles.fullWidth : "",
+      className,
+    ].join(" ")}
+  />
 );
 
 export default FormInput;

src/screens/about/index.module.scss

@@ -79,20 +79,6 @@ $card-desc-shadow:
   }
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 184px;
-  margin: 0 auto;
-  max-width: $breakpoint-desktop;
-
-  @include down-laptop {
-    gap: 40px;
-    max-width: 100%;
-    padding: 0 12px;
-  }
-}
-
 .sectionStack {
   align-items: center;
   color: $color-forbole-blue-1;

src/screens/about/index.tsx

@@ -10,6 +10,7 @@ import Horse from "@src/components/icons/horse.svg";
 import Layout from "@src/components/layout";
 import ScrollToTop from "@src/components/scroll_to_top";
 import { ImgBox, YTBSwiperCSS } from "@src/screens/about/SwiperCSS";
+import * as commonStyles from "@src/styles/common.module.scss";
 import { IS_E2E } from "@src/utils/e2e";
 
 import * as styles from "./index.module.scss";
@@ -70,7 +71,7 @@ const About = () => {
       redBgFooter
       title={t("page_title")}
     >
-      <div className={styles.container} ref={topRef}>
+      <div className={commonStyles.pageContainer} ref={topRef}>
         <div className={styles.topStack}>
           <div className={styles.topStackInner}>
             <h1 className={styles.cardTitle}>{t("headercard_title")}</h1>
@@ -177,7 +178,7 @@ const About = () => {
         </div>
       </YTBSwiperCSS>
 
-      <div className={styles.container}>
+      <div className={commonStyles.pageContainer}>
         <div>
           <div className={styles.sectionStack}>
             <Trans

src/screens/contact/index.module.scss

@@ -133,7 +133,6 @@ $form-shadow:
 .labelStart {
   font-size: 16px;
   font-weight: 590;
-  margin-bottom: 16px;
 }
 
 .list {
@@ -148,3 +147,9 @@ $form-shadow:
 .required {
   color: $color-pink-1;
 }
+
+.listWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

src/screens/contact/index.tsx

@@ -17,6 +17,7 @@ import CtaButton from "@src/components/cta-button";
 import FormInput from "@src/components/form_input";
 import Layout from "@src/components/layout";
 import SuccessModal from "@src/components/success-modal";
+import * as commonStyles from "@src/styles/common.module.scss";
 
 import useContactForm from "./hooks";
 import * as styles from "./index.module.scss";
@@ -65,7 +66,7 @@ const Contact = () => {
 
   return (
     <Layout description={t("form_desc")} footer title={t("page_title")}>
-      <div>
+      <div className={commonStyles.pageContainer}>
         <Stack className={styles.form}>
           <Stack>
             <span className={styles.title}>{t("form_title")}</span>
@@ -97,6 +98,7 @@ const Contact = () => {
                 <span className={styles.required}>*</span>
               </span>
               <FormInput
+                fullWidth
                 name="name"
                 onInput={handleInputChange}
                 placeholder={t("name")}
@@ -106,6 +108,7 @@ const Contact = () => {
             <Grid item laptop={6} mobile={12}>
               <span className={styles.label}>{t("label_company")}</span>
               <FormInput
+                fullWidth
                 name="company"
                 onInput={handleInputChange}
                 placeholder={t("Company")}
@@ -118,6 +121,7 @@ const Contact = () => {
                 <span className={styles.required}>*</span>
               </span>
               <FormInput
+                fullWidth
                 name="email"
                 onInput={handleInputChange}
                 placeholder={t("Email")}
@@ -128,13 +132,14 @@ const Contact = () => {
             <Grid item laptop={6} mobile={12}>
               <span className={styles.label}>{t("label_telegram")}</span>
               <FormInput
+                fullWidth
                 name="telegram"
                 onInput={handleInputChange}
                 placeholder={t("Telegram")}
                 value={inputs.telegram}
               />
             </Grid>
-            <Grid item laptop={6} mobile={12}>
+            <Grid className={styles.listWrapper} item laptop={6} mobile={12}>
               <span className={styles.labelStart}>
                 {t("get_start")}
                 <span className={styles.required}>*</span>

src/screens/developer_tools/index.module.scss

@@ -1,16 +1,5 @@
 @import "src/styles/sass.scss";
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 184px;
-  max-width: $breakpoint-desktop;
-
-  @include down-laptop {
-    gap: 40px;
-  }
-}
-
 .ctaStack {
   flex-direction: row;
   gap: 16px;

src/screens/developer_tools/index.tsx

@@ -13,6 +13,7 @@ import Section from "@src/components/section";
 import SignatureCard from "@src/components/signature-card";
 import SuccessModal from "@src/components/success-modal";
 import { useDelayedIsMobile } from "@src/hooks/delayed_is_mobile";
+import * as commonStyles from "@src/styles/common.module.scss";
 
 import useTalkModalForm from "./hooks";
 import * as styles from "./index.module.scss";
@@ -72,7 +73,7 @@ const DeveloperTools = () => {
       footer
       title={t("page_title")}
     >
-      <Container className={styles.container} ref={topRef}>
+      <Container className={commonStyles.pageContainer} ref={topRef}>
         <HeaderCard
           desc_1st={t("headercard_1st_desc")}
           desc_2nd={t("headercard_2nd_desc")}

src/screens/infrastructure/index.module.scss

@@ -19,19 +19,6 @@
   }
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 184px;
-  margin: 0 auto;
-  max-width: $breakpoint-desktop;
-  padding: 0 16px;
-
-  @include down-laptop {
-    gap: 40px;
-  }
-}
-
 .section {
   align-items: center;
   display: flex;

src/screens/infrastructure/index.tsx

@@ -14,6 +14,7 @@ import Section from "@src/components/section";
 import { StyledTab, StyledTabs } from "@src/components/selection-tab";
 import Stats from "@src/components/stats";
 import { useDelayedIsLaptop } from "@src/hooks/delayed_is_mobile";
+import * as commonStyles from "@src/styles/common.module.scss";
 import GQLProvider from "@src/utils/gql";
 import { scrollBottom } from "@src/utils/scroll";
 
@@ -118,7 +119,7 @@ const Infrastructure = () => {
   return (
     <GQLProvider>
       <Layout description={t("expertise_item1")} footer title={t("page_title")}>
-        <div className={styles.container} ref={topRef}>
+        <div className={commonStyles.pageContainer} ref={topRef}>
           <HeaderCard
             desc_1st={t("headercard_desc")}
             head_bgs={[

src/styles/_mixins.scss

@@ -0,0 +1,62 @@
+$breakpoint-mobile: 375px;
+$breakpoint-tablet: 768px;
+$breakpoint-laptop: 1025px;
+$breakpoint-desktop: 1208px;
+
+@mixin down-mobile {
+  @media (max-width: $breakpoint-mobile - 1) {
+    @content;
+  }
+}
+
+@mixin up-mobile {
+  @media (min-width: $breakpoint-mobile) {
+    @content;
+  }
+}
+
+@mixin down-tablet {
+  @media (max-width: $breakpoint-tablet - 1) {
+    @content;
+  }
+}
+
+@mixin up-tablet {
+  @media (min-width: $breakpoint-tablet) {
+    @content;
+  }
+}
+
+@mixin down-laptop {
+  @media (max-width: $breakpoint-laptop - 1) {
+    @content;
+  }
+}
+
+@mixin up-laptop {
+  @media (min-width: $breakpoint-laptop) {
+    @content;
+  }
+}
+
+@mixin up-desktop {
+  @media (min-width: $breakpoint-desktop) {
+    @content;
+  }
+}
+
+@mixin gradient-text($gradient) {
+  background-image: $gradient;
+  // stylelint-disable-next-line
+  -webkit-text-fill-color: rgba(0, 0, 0, 0);
+  // stylelint-disable-next-line property-no-unknown
+  text-fill-color: rgba(0, 0, 0, 0);
+  // stylelint-disable-next-line
+  background-clip: text;
+  // stylelint-disable-next-line
+  -webkit-background-clip: text;
+}
+
+@function spacing($num) {
+  @return $num * 8px;
+}

src/styles/common.module.scss

@@ -0,0 +1,15 @@
+@import "src/styles/sass.scss";
+
+.pageContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 184px;
+  margin: 0 auto;
+  max-width: $breakpoint-desktop;
+
+  @include down-laptop {
+    gap: 40px;
+    max-width: 100%;
+    padding: 0 12px;
+  }
+}

src/styles/sass.scss

@@ -1,64 +1,2 @@
 @import "./colors.scss";
-
-$breakpoint-mobile: 375px;
-$breakpoint-tablet: 768px;
-$breakpoint-laptop: 1025px;
-$breakpoint-desktop: 1208px;
-
-@mixin down-mobile {
-  @media (max-width: $breakpoint-mobile - 1) {
-    @content;
-  }
-}
-
-@mixin up-mobile {
-  @media (min-width: $breakpoint-mobile) {
-    @content;
-  }
-}
-
-@mixin down-tablet {
-  @media (max-width: $breakpoint-tablet - 1) {
-    @content;
-  }
-}
-
-@mixin up-tablet {
-  @media (min-width: $breakpoint-tablet) {
-    @content;
-  }
-}
-
-@mixin down-laptop {
-  @media (max-width: $breakpoint-laptop - 1) {
-    @content;
-  }
-}
-
-@mixin up-laptop {
-  @media (min-width: $breakpoint-laptop) {
-    @content;
-  }
-}
-
-@mixin up-desktop {
-  @media (min-width: $breakpoint-desktop) {
-    @content;
-  }
-}
-
-@mixin gradient-text($gradient) {
-  background-image: $gradient;
-  // stylelint-disable-next-line
-  -webkit-text-fill-color: rgba(0, 0, 0, 0);
-  // stylelint-disable-next-line property-no-unknown
-  text-fill-color: rgba(0, 0, 0, 0);
-  // stylelint-disable-next-line
-  background-clip: text;
-  // stylelint-disable-next-line
-  -webkit-background-clip: text;
-}
-
-@function spacing($num) {
-  @return $num * 8px;
-}
+@import "./mixins.scss";