fix layout styles

Staketab · Mar 4, 2024 · 48c14ef · 48c14ef
1 parent 2cefa09
commit 48c14ef
Show file tree

Hide file tree

Showing 20 changed files with 63 additions and 38 deletions.
diff --git a/ui/app/actions.ts → ui/app/actions/actions.ts b/ui/app/actions.ts → ui/app/actions/actions.ts
@@ -73,19 +73,6 @@ export async function getDomains({
   return await res.json();
 }
 
-export async function checkReservedName(domainName: string) {
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}/domains/${domainName}/reserved`,
-    {
-      headers: {
-        "Content-Type": "application/json",
-        "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
-      },
-    }
-  );
-  return await res.json();
-}
-
 
 export async function getDomainsMetadata(id: string) {
   const res = await fetch(

diff --git a/ui/app/actions/clientActions.ts b/ui/app/actions/clientActions.ts
@@ -0,0 +1,6 @@
+export async function checkReservedName(domainName: string) {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/domains/${domainName}/reserved`
+  );
+  return await res.json();
+}
diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -24,7 +24,6 @@ export default function RootLayout({
     <html lang="en">
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <body className={inter.className}>
-        <OverlayWrapper />
         {children}
       </body>
     </html>

diff --git a/ui/app/names/page.tsx b/ui/app/names/page.tsx
@@ -5,7 +5,7 @@ import style from "./index.module.css";
 import { Navigation } from "@/components/organisms/navigation";
 import { AccountContent } from "@/components/organisms/accountConent";
 import { useEffect, useState } from "react";
-import { getAccountDomains, getDomains, getDomainsMetadata } from "../actions";
+import { getAccountDomains, getDomains, getDomainsMetadata } from "../actions/actions";
 import { ORDER_BY, SORT_BY } from "@/comman/types";
 
 export default function Page() {

diff --git a/ui/components/atoms/input/input.tsx b/ui/components/atoms/input/input.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import SearchIcon from "../../../assets/search.svg";
 import style from "./index.module.css";
 import Image from "next/image";
+import { interMedium } from "@/app/fonts";
 
 export enum InputVariant {
   search = "search",
@@ -31,7 +32,7 @@ const Input = ({
   return (
     <div className={style.wrapper}>
       <input
-        className={classNames(style.input, className, 't-inter-medium')}
+        className={classNames(style.input, className, interMedium.className)}
         onChange={onChange}
         placeholder={placeholder}
         value={value}

diff --git a/ui/components/atoms/resultItem/index.module.css b/ui/components/atoms/resultItem/index.module.css
@@ -12,3 +12,17 @@
 .wrapper span {
   color: #9c9ea6;
 }
+
+.wrapper .status {
+  margin-left: 8px;
+  padding: 2px 8px;
+  background-color: #E0F9EB;
+  color: #3CA568;
+  border-radius: 5.5px;
+  font-size: 16px;
+}
+
+.wrapper .unavailable {
+  color: var(--col--button9);
+  background-color: rgba(234, 57, 67, .3);
+}
diff --git a/ui/components/atoms/resultItem/resultItem.tsx b/ui/components/atoms/resultItem/resultItem.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { Button } from "../button";
 import { Variant } from "../button/types";
 import style from "./index.module.css";
+import { interMedium } from "@/app/fonts";
 
 const ResultItem = ({
   statusName,
@@ -13,11 +14,18 @@ const ResultItem = ({
   };
   className: string;
 }) => {
+  console.log(statusName);
+
   return (
-    <div className={classNames(style.wrapper, className, "t-inter-medium")}>
+    <div
+      className={classNames(style.wrapper, className, interMedium.className)}
+    >
       <div>
         {statusName.name}
         <span>.mina</span>
+        <span className={classNames(style.status, interMedium.className, {
+          [style.unavailable]: statusName.isReserved
+        })}>{statusName.isReserved ? "Not available" : "available"}</span>
       </div>
       <Button text="Purchase" variant={Variant.blue} />
     </div>

diff --git a/ui/components/molecules/connectWalletButton/walletConnectPopUp/header.tsx b/ui/components/molecules/connectWalletButton/walletConnectPopUp/header.tsx
@@ -5,7 +5,7 @@ import CloseIcon from './img/CloseIcon.svg';
 import WalletConnectPopUpProgress from './stepProgress';
 import Image from 'next/image';
 import classNames from 'classnames';
-import { interSemiBold } from '@/app/fonts';
+import { interMedium, interSemiBold } from '@/app/fonts';
 
 const WalletConnectPopUpHeader = ({ step, onClose, message, action, isMobile }) => {
     return (
@@ -21,7 +21,7 @@ const WalletConnectPopUpHeader = ({ step, onClose, message, action, isMobile })
             <div className={style.progressContainer}>
                 <WalletConnectPopUpProgress step={step} />
             </div>
-            <p className={classNames(style.message, 't-inter-medium')}>{message}</p>
+            <p className={classNames(style.message, interMedium.className)}>{message}</p>
         </div>
     );
 };

diff --git a/ui/components/molecules/connectWalletButton/walletConnectPopUp/screens/connectionScreen.tsx b/ui/components/molecules/connectWalletButton/walletConnectPopUp/screens/connectionScreen.tsx
@@ -3,7 +3,7 @@ import style from './Screens.module.css';
 import { Button } from '../../../../atoms/button';
 import classNames from 'classnames';
 import Image from 'next/image';
-import { interSemiBold } from '@/app/fonts';
+import { interBold, interMedium, interSemiBold } from '@/app/fonts';
 
 const ConnectingScreen = ({ onReturn, walletName, walletImg }) => {
     return (
@@ -14,10 +14,10 @@ const ConnectingScreen = ({ onReturn, walletName, walletImg }) => {
                     <Image src={walletImg} alt="" />
                 </div>
             </div>
-            <p className={classNames(style.connectingScreenSubtitle, 't-inter-bold')}>
+            <p className={classNames(style.connectingScreenSubtitle, interBold.className)}>
                 Opening {walletName ?? 'wallet'}...
             </p>
-            <p className={classNames(style.connectingScreenText, 't-inter-medium')}>
+            <p className={classNames(style.connectingScreenText, interMedium.className)}>
                 Confirm connection in the extension.
             </p>
             <Button text="Back to wallets" onClick={onReturn} className={style.connectingScreenButton} />

diff --git a/ui/components/molecules/nameCard/nameCard.tsx b/ui/components/molecules/nameCard/nameCard.tsx
@@ -3,6 +3,7 @@ import { Button } from "../../atoms/button";
 
 import style from "./index.module.css";
 import { Variant } from "../../atoms/button/types";
+import { interSemiBold } from "@/app/fonts";
 
 type NameCardProps = {
   img: string;
@@ -13,7 +14,7 @@ const NameCard = ({ img, name }: NameCardProps): JSX.Element => {
   return (
     <div className={style.wrapper}>
       <Image src={img} alt="" />
-      <span className="t-inter-semi-bold">{name}</span>
+      <span className={interSemiBold.className}>{name}</span>
       <Button
         text="Manage"
         onClick={() => console.log("Manage")}

diff --git a/ui/components/molecules/selectPlate/index.tsx b/ui/components/molecules/selectPlate/index.tsx
@@ -3,6 +3,7 @@ import style from './SelectPlate.module.css';
 import ArrowIcon from './img/Arrow.svg';
 import classNames from 'classnames';
 import Image from 'next/image';
+import { interSemiBold } from '@/app/fonts';
 
 type SelectPlateProps = {
     onClick: () => void;
@@ -14,7 +15,7 @@ type SelectPlateProps = {
 const SelectPlate = ({ onClick, expanded, title, disable }: SelectPlateProps): JSX.Element => {
     return (
         <div className={classNames(style.selectPlate, expanded && style.expanded)} onClick={!disable ? onClick : null}>
-            <span className={classNames('t-inter-semi-bold', style.selectTitle)}>{title}</span>
+            <span className={classNames(interSemiBold.className, style.selectTitle)}>{title}</span>
             <Image
                 src={ArrowIcon}
                 alt=""

diff --git a/ui/components/organisms/accountConent/accountContent.tsx b/ui/components/organisms/accountConent/accountContent.tsx
@@ -6,6 +6,7 @@ import { ConnectWalletButton } from "../../molecules/connectWalletButton";
 import { Table } from "../table";
 import { ScoringConfig, mockData } from "./constants";
 import style from "./index.module.css";
+import { interSemiBold } from "@/app/fonts";
 
 const AccountContent = () => {
   const [typeView, setTypeView] = useState<TypeView>(TypeView.CARD);
@@ -16,7 +17,7 @@ const AccountContent = () => {
   return (
     <div className={style.wrapper}>
       <div className={style.header}>
-        <div className="t-inter-semi-bold">My Names</div>
+        <div className={interSemiBold.className}>My Names</div>
         <ConnectWalletButton />
       </div>
       <SwitchView onClick={handleSwitchView} className={style.switchView} />

diff --git a/ui/components/organisms/navigation/navigation.tsx b/ui/components/organisms/navigation/navigation.tsx
@@ -7,6 +7,7 @@ import style from "./index.module.css";
 import classNames from "classnames";
 import AccountIcon from "../../atoms/iconComponents/account";
 import { usePathname } from "next/navigation";
+import { interMedium } from "@/app/fonts";
 
 const Navigation = () => {
   const pathname = usePathname();
@@ -20,7 +21,7 @@ const Navigation = () => {
             <Link
               href={url}
               key={id}
-              className={classNames(style.link, "t-inter-medium", {
+              className={classNames(style.link, interMedium.className, {
                 [style.active]: pathname.includes(url),
               })}
             >

diff --git a/ui/components/organisms/pager/index.tsx b/ui/components/organisms/pager/index.tsx
@@ -4,6 +4,7 @@ import style from './Pager.module.css';
 import ArrowIcon from './img/ArrowIcon.svg';
 import Image from 'next/image';
 import { useMedia } from '../../../hooks/useMedia';
+import { interMedium } from '@/app/fonts';
 
 type PagerProps = {
     page: number;
@@ -81,7 +82,7 @@ const Pager = ({ page, count = 1, onChange, pageNeighbours = 1 }: PagerProps): J
         <div className={style.pager}>
             {showPrevButton && (
                 <button
-                    className={classNames('t-inter-medium', style.control, style.btn)}
+                    className={classNames(interMedium.className, style.control, style.btn)}
                     onClick={() => changeHandler(page - 1)}
                 >
                     <Image src={ArrowIcon} alt="" style={{ transform: 'rotateY(180deg)' }} />
@@ -91,15 +92,15 @@ const Pager = ({ page, count = 1, onChange, pageNeighbours = 1 }: PagerProps): J
             {fetchPageNumbers().map((el, i) => {
                 if (el === ELLIPSIS)
                     return (
-                        <button key={el + i} className={classNames('t-inter-medium', style.btn, style.ellipsis)}>
+                        <button key={el + i} className={classNames(interMedium.className, style.btn, style.ellipsis)}>
                             {el}
                         </button>
                     );
 
                 return (
                     <button
                         key={el}
-                        className={classNames('t-inter-medium', style.btn, {
+                        className={classNames(interMedium.className, style.btn, {
                             [style.active]: page === el,
                         })}
                         onClick={() => changeHandler(el)}
@@ -111,7 +112,7 @@ const Pager = ({ page, count = 1, onChange, pageNeighbours = 1 }: PagerProps): J
 
             {showNextButton && (
                 <button
-                    className={classNames('t-inter-medium', style.control, style.btn)}
+                    className={classNames(interMedium.className, style.control, style.btn)}
                     onClick={() => changeHandler(page + 1)}
                 >
                     <Image src={ArrowIcon} alt="" />

diff --git a/ui/components/organisms/table/templates/amountTemplate/index.tsx b/ui/components/organisms/table/templates/amountTemplate/index.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import styles from './index.module.css';
 import { formatNum } from '../../../../../comman/helpers';
+import { interMedium } from '@/app/fonts';
 
 type AmountTemplateProps = {
     data: any;
@@ -17,7 +18,7 @@ const AmountTemplate = ({ data, config }: AmountTemplateProps): JSX.Element => {
     const additionValue = data[config.fields.additionValue] || config.fields.additionValue;
 
     return (
-        <div className={classNames('t-inter-medium', styles.stringTemplate)}>
+        <div className={classNames(interMedium.className, styles.stringTemplate)}>
             <>
                 {formatNum(value, 2, true, true)}
                 {additionValue && <span className={styles.addionValue}>{additionValue}</span>}

diff --git a/ui/components/organisms/table/templates/namesTemplate/namesTemplate.tsx b/ui/components/organisms/table/templates/namesTemplate/namesTemplate.tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 
 import style from "../index.module.css";
 import classNames from "classnames";
+import { interMedium } from "@/app/fonts";
 
 type NamesTemplateProps = {
   data: any;
@@ -18,7 +19,7 @@ const NamesTemplate = ({ data, config }: NamesTemplateProps) => {
   const imgUrl = data[config.fields.url];
 
   return (
-    <div className={classNames(style.namesTemplate, "t-inter-medium")}>
+    <div className={classNames(style.namesTemplate, interMedium.className)}>
       <Image src={imgUrl} alt="" />
       {value}
     </div>

diff --git a/ui/components/organisms/table/templates/stringTemplate/index.tsx b/ui/components/organisms/table/templates/stringTemplate/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import classNames from "classnames";
 
 import styles from "../index.module.css";
+import { interMedium } from "@/app/fonts";
 
 type StringTemplateProps = {
   data: any;
@@ -33,7 +34,7 @@ const StringTemplate = ({ data, config }: StringTemplateProps) => {
     value === null;
 
   return (
-    <div className={classNames("t-inter-medium", styles.stringTemplate)}>
+    <div className={classNames(interMedium.className, styles.stringTemplate)}>
       {isShowDash ? (
         "-"
       ) : (

diff --git a/ui/components/organisms/table/templates/timeTemplate/timeTemplate.tsx b/ui/components/organisms/table/templates/timeTemplate/timeTemplate.tsx
@@ -6,6 +6,7 @@ import {
   dateTimeFromTimestamp,
   getTimeFromMillisecondsDynamic,
 } from "@/helpers/timeHelper";
+import { interMedium } from "@/app/fonts";
 
 type TimeTemplateProps = {
   data: any;
@@ -30,7 +31,7 @@ const TimeTemplate = ({ data, config }: TimeTemplateProps) => {
   }, []);
 
   return (
-    <div className={classNames(style.timeTemplate, "t-inter-medium")}>
+    <div className={classNames(style.timeTemplate, interMedium.className)}>
       <span>{getTimeFromMillisecondsDynamic(date - value, false, true)}</span>
       <span>{dateTimeFromTimestamp(value)}</span>
     </div>

diff --git a/ui/components/organisms/table/view/listTableContent.tsx b/ui/components/organisms/table/view/listTableContent.tsx
@@ -5,6 +5,7 @@ import sortIcon from "../img/SortIcon.svg";
 
 import { ORDER_BY, SORT_BY } from "../../../../comman/types";
 import getCell from "../templates";
+import { interSemiBold } from "@/app/fonts";
 
 type ListTableContent = {
   data: any[];
@@ -33,7 +34,7 @@ const ListTableContent = ({
             <th
               key={headerText}
               onClick={() => handleSort(configSortBy)}
-              className={classNames("t-inter-semi-bold", {
+              className={classNames(interSemiBold.className, {
                 [style.headerCellHover]: configSortBy,
               })}
             >

diff --git a/ui/components/sections/homeSection/homeSection.tsx b/ui/components/sections/homeSection/homeSection.tsx
@@ -4,13 +4,13 @@ import classNames from "classnames";
 
 import style from "./index.module.css";
 import { ConnectWalletButton } from "@/components/molecules/connectWalletButton";
-import { interSemiBold } from "@/app/fonts";
+import { interMedium, interSemiBold } from "@/app/fonts";
 import { Input } from "@/components/atoms/input";
 import { ResultItem } from "@/components/atoms/resultItem";
 import { InputVariant } from "@/components/atoms/input/input";
 import { useRef, useState } from "react";
 import { useKeyPress } from "@/hooks/useKeyPress";
-import { checkName, checkReservedName } from "@/app/actions";
+import { checkReservedName } from "@/app/actions/clientActions";
 
 const HomeSection = () => {
   const [statusName, setStatusName] = useState<{
@@ -47,7 +47,7 @@ const HomeSection = () => {
       </div>
       <div className={style.content}>
         <h1 className={interSemiBold.className}>Reveal Your True Self</h1>
-        <p className="t-inter-medium">
+        <p className={interMedium.className}>
           A creative ID that showcases your personality
         </p>
         <Input