chore: update faucet with tailwind (anoma#609)

phy-chain · Feb 5, 2024 · 7610dad · 7610dad
1 parent 8e8680b
commit 7610dad
Show file tree

Hide file tree

Showing 15 changed files with 210 additions and 69 deletions.
diff --git a/apps/faucet/package.json b/apps/faucet/package.json
@@ -45,8 +45,13 @@
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "local-cors-proxy": "^1.1.0",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^8.1.0",
+    "postcss-preset-env": "^9.3.0",
+    "tailwindcss": "^3.4.1",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript-plugin-styled-components": "^2.0.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"

diff --git a/apps/faucet/postcss.config.js b/apps/faucet/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/faucet/src/App/App.tsx b/apps/faucet/src/App/App.tsx
@@ -149,7 +149,7 @@ export const App: React.FC = () => {
         <AppContainer>
           <ContentContainer>
             <TopSection>
-              <Heading uppercase themeColor="utility1" size="5xl" level="h1">
+              <Heading className="uppercase text-black text-5xl" level="h1">
                 Namada Faucet
               </Heading>
             </TopSection>

diff --git a/apps/faucet/src/App/CallToActionCard.tsx b/apps/faucet/src/App/CallToActionCard.tsx
@@ -1,17 +1,17 @@
 import React, { useState } from "react";
+import InclineArrowBlack from "../../public/incline-arrow-black.svg";
+import InclineArrowYellow from "../../public/incline-arrow-yellow.svg";
 import {
   BottomBorder,
   CallToActionContainer,
   CardContainer,
+  CardDescription,
+  CardHeading,
   InclineArrowIcon,
   LeftBorder,
   RightBorder,
   TopBorder,
-  CardDescription,
-  CardHeading
 } from "./Card.components";
-import InclineArrowYellow from "../../public/incline-arrow-yellow.svg";
-import InclineArrowBlack from "../../public/incline-arrow-black.svg";
 
 type Props = {
   description: string;
@@ -33,13 +33,18 @@ export const CallToActionCard: React.FC<Props> = ({
   };
 
   return (
-    <CardContainer href={href} onMouseEnter={onHover} onMouseLeave={onLeave} target="_blank">
+    <CardContainer
+      href={href}
+      onMouseEnter={onHover}
+      onMouseLeave={onLeave}
+      target="_blank"
+    >
       <TopBorder />
       <RightBorder />
       <BottomBorder />
       <LeftBorder />
       <CardDescription>{description}</CardDescription>
-      <CallToActionContainer>
+      <CallToActionContainer className="mt-9">
         <CardHeading>{title}</CardHeading>
         <InclineArrowIcon
           src={isHovered ? InclineArrowYellow : InclineArrowBlack}

diff --git a/apps/faucet/src/App/Faq.components.tsx b/apps/faucet/src/App/Faq.components.tsx
@@ -1,6 +1,6 @@
-import styled, { css, keyframes } from "styled-components";
 import { Text } from "@namada/components";
 import React from "react";
+import styled, { css, keyframes } from "styled-components";
 
 export const FaqContainer = styled.div`
   display: flex;
@@ -42,16 +42,21 @@ export const FaqDropdownContent = styled.div<{ isOpen: boolean | null }>`
   overflow: hidden; /* Ensure content doesn't overflow during animation */
   margin-top: 8px;
   ${({ isOpen }) => {
-    const toggleAnimation = isOpen ? 
-    css`
-      max-height: 200px;
-      animation: ${expand} 0.35s ease-out;
-    `: css`
-      max-height: 0px;
-      animation: ${collapse} 0.35s ease-out;
-    `;
-    return isOpen === null ? css`max-height: 0px;` : toggleAnimation
-  }}  
+    const toggleAnimation = isOpen
+      ? css`
+          max-height: 200px;
+          animation: ${expand} 0.35s ease-out;
+        `
+      : css`
+          max-height: 0px;
+          animation: ${collapse} 0.35s ease-out;
+        `;
+    return isOpen === null
+      ? css`
+          max-height: 0px;
+        `
+      : toggleAnimation;
+  }}
 `;
 
 export const DropDownTitle = styled.div`
@@ -63,13 +68,15 @@ export const DropDownTitle = styled.div`
 
 export const DropDownTitleText: React.FC = ({ children }) => {
   return (
-    <div style={{
-      maxWidth: '90%',
-    }}>
-      <Text themeColor="utility1" fontSize="2xl">{children}</Text>
+    <div
+      style={{
+        maxWidth: "90%",
+      }}
+    >
+      <Text className="text-black text-2xl my-0">{children}</Text>
     </div>
-  )
-}
+  );
+};
 
 const FaqUrlStyle = styled.a`
   color: ${(props) => props.theme.colors.utility3.black};
@@ -78,34 +85,37 @@ const FaqUrlStyle = styled.a`
   }
 `;
 
-interface FaqUrlProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {  
-}
+interface FaqUrlProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {}
 export const FaqUrl: React.FC<FaqUrlProps> = ({ ...props }) => {
   // prevent onClick from bubbling up to parent
   return <FaqUrlStyle onClick={(e) => e.stopPropagation()} {...props} />;
-}
+};
 
 const rotateAnimation = keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(45deg);
-  }`
+  }`;
 
 const reverseRotateAnimation = keyframes`
   from {
     transform: rotate(45deg);
   }
   to {
     transform: rotate(0deg);
-  }`
-export const PlusIcon = styled.img<{ isOpen: boolean | null}>`
+  }`;
+export const PlusIcon = styled.img<{ isOpen: boolean | null }>`
   width: 24px;
   ${({ isOpen }) => {
-    const rotateAnimationCss = isOpen 
-    ? css`animation: ${rotateAnimation} 0.2s ease-in-out forwards;` : css`animation: ${reverseRotateAnimation} 0.2s ease-in-out forwards;`;
-    return isOpen === null  ? '': rotateAnimationCss;
-  }}`;
-
-
+    const rotateAnimationCss = isOpen
+      ? css`
+          animation: ${rotateAnimation} 0.2s ease-in-out forwards;
+        `
+      : css`
+          animation: ${reverseRotateAnimation} 0.2s ease-in-out forwards;
+        `;
+    return isOpen === null ? "" : rotateAnimationCss;
+  }}
+`;
diff --git a/apps/faucet/src/App/Faq.tsx b/apps/faucet/src/App/Faq.tsx
@@ -1,6 +1,6 @@
+import { Text } from "@namada/components";
 import React from "react";
 import { FaqContainer, FaqUrl } from "./Faq.components";
-import { Text } from "@namada/components";
 import { FaqDropdown } from "./FaqDropdown";
 
 const namadaDiscord = "https://discord.com/invite/namada";
@@ -10,25 +10,24 @@ const becomeValidatorUrl =
 export const Faq: React.FC = () => {
   return (
     <FaqContainer>
-      <Text fontSize="5xl" themeColor="utility1">
-        FAQs
-      </Text>
+      <Text className="text-black text-5xl my-0">FAQs</Text>
       <FaqDropdown title="How do I use this?">
-        <Text themeColor="utility1" fontSize="base">
+        <Text className="text-black my-0">
           To request funds, simply enter your wallet address and hit “Get
           Testnet Tokens”.
         </Text>
-        <div style={{ marginTop: '16px' }}></div>
-        <Text themeColor="utility1" fontSize="base">
-          See the{" \""}
+        <div style={{ marginTop: "16px" }}></div>
+        <Text className="text-black my-0">
+          See the{' "'}
           <FaqUrl href={becomeValidatorUrl}>
-            {'Generating a validator account'}
-          </FaqUrl>{"\" "}
+            {"Generating a validator account"}
+          </FaqUrl>
+          {'" '}
           section if you need to create a new address.
         </Text>
       </FaqDropdown>
       <FaqDropdown title="How can I use these tokens?">
-        <Text themeColor="utility1" fontSize="base">
+        <Text className="text-black my-0">
           These are test coins on a test network and do not have any real value
           for regular users. They are designed for developers to test and
           develop their applications without using real money. Please note that
@@ -37,19 +36,19 @@ export const Faq: React.FC = () => {
         </Text>
       </FaqDropdown>
       <FaqDropdown title="The faucet confirmed that it sent me tokens, but I still have not received them">
-        <Text themeColor="utility1" fontSize="base">
+        <Text className="text-black my-0">
           The time required to receive test tokens may vary. It depends on the
           speed of the blocks in the current chain.
         </Text>
-        <div style={{ marginTop: '16px' }}></div>
-        <Text themeColor="utility1" fontSize="base" >
+        <div style={{ marginTop: "16px" }}></div>
+        <Text className="text-black my-0">
           If more than a few hours have passed and you still have not received
           your tokens, please email us at{" "}
           <FaqUrl href={namadaDiscord}>{"Discord!"}</FaqUrl>
         </Text>
       </FaqDropdown>
       <FaqDropdown title="What if the faucet doesn't work?">
-        <Text themeColor="utility1" fontSize="base">
+        <Text className="text-black my-0">
           <FaqUrl href={namadaDiscord}>{"Join our Discord"}</FaqUrl> to share
           any issues or questions you have relating to the faucet. We will
           definitely help!

diff --git a/apps/faucet/src/App/FaqDropdown.tsx b/apps/faucet/src/App/FaqDropdown.tsx
@@ -1,6 +1,12 @@
 import React, { useState } from "react";
-import { FaqDropdownContainer, FaqDropdownContent, PlusIcon, DropDownTitle, DropDownTitleText } from "./Faq.components";
-import plusIcon from '../../public/plus-icon.svg'
+import plusIcon from "../../public/plus-icon.svg";
+import {
+  DropDownTitle,
+  DropDownTitleText,
+  FaqDropdownContainer,
+  FaqDropdownContent,
+  PlusIcon,
+} from "./Faq.components";
 
 type Props = {
   title: string;
@@ -16,14 +22,11 @@ export const FaqDropdown: React.FC<Props> = ({ children, title }) => {
   return (
     <FaqDropdownContainer onClick={handleToggle}>
       <DropDownTitle>
-        <DropDownTitleText>
-          {title}
-        </DropDownTitleText>
+        <DropDownTitleText>{title}</DropDownTitleText>
         <PlusIcon src={plusIcon} isOpen={isOpen} />
       </DropDownTitle>
 
       <FaqDropdownContent isOpen={isOpen}>{children}</FaqDropdownContent>
-
     </FaqDropdownContainer>
   );
 };
diff --git a/apps/faucet/src/App/Faucet.tsx b/apps/faucet/src/App/Faucet.tsx
@@ -1,4 +1,4 @@
-import { AmountInput, ActionButton, Alert, Input } from "@namada/components";
+import { ActionButton, Alert, AmountInput, Input } from "@namada/components";
 import BigNumber from "bignumber.js";
 import { sanitize } from "dompurify";
 import React, { useCallback, useContext, useEffect, useState } from "react";
@@ -211,12 +211,14 @@ export const FaucetForm: React.FC<Props> = ({ isTestnetLive }) => {
       <ButtonContainer>
         <ActionButton
           style={{
-            backgroundColor: theme.colors.secondary.main,
             fontSize: "1.25rem",
             lineHeight: "1.6",
             padding: "0.6em 2.5em",
             margin: 0,
           }}
+          className={`max-w-fit ${!isFormValid && "opacity-50"}`}
+          color="secondary"
+          borderRadius="lg"
           onClick={handleSubmit}
           disabled={!isFormValid}
         >

diff --git a/apps/faucet/src/index.tsx b/apps/faucet/src/index.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
 import { App } from "./App";
+import "./index.css";
+import "./tailwind.css";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById("root")
 );
-
diff --git a/apps/faucet/src/tailwind.css b/apps/faucet/src/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/faucet/tailwind.config.js b/apps/faucet/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "../../packages/components/src/**/*.{js,ts,jsx,tsx}",
+  ],
+  presets: [require("@namada/components/src/theme.js")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/apps/faucet/tsconfig.json b/apps/faucet/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,

diff --git a/apps/faucet/tsconfig.webpack.json b/apps/faucet/tsconfig.webpack.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig",
+  "extends": "./tsconfig.json",
   "exclude": [
     "**/*.test.ts",
     "./node_modules/**/*.tsx",

diff --git a/apps/faucet/webpack.config.js b/apps/faucet/webpack.config.js
@@ -1,5 +1,6 @@
 const webpack = require("webpack");
 const { resolve, join } = require("path");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const { getProcessEnv } = require("@namada/config/webpack.js");
@@ -40,10 +41,13 @@ const plugins = [
   // Provide environment variables to interface:
   new webpack.DefinePlugin({
     process: {
-      env: JSON.stringify(getProcessEnv(
-        "NAMADA_INTERFACE",
-        ["TARGET", "NODE_ENV", "npm_package_version"]
-      )),
+      env: JSON.stringify(
+        getProcessEnv("NAMADA_INTERFACE", [
+          "TARGET",
+          "NODE_ENV",
+          "npm_package_version",
+        ])
+      ),
     },
   }),
 ];
@@ -81,7 +85,7 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: ["style-loader", "css-loader", "postcss-loader"],
       },
       {
         test: /\.png$/i,
@@ -131,6 +135,11 @@ module.exports = {
       buffer: require.resolve("buffer/"),
       crypto: require.resolve("crypto-browserify"),
     },
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: "tsconfig.json",
+      }),
+    ],
   },
   performance: {
     hints: false,