style: use Tailwind CSS

ben-29 · Apr 21, 2024 · c153ccf · c153ccf
1 parent e38b63d
commit c153ccf
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 13 deletions.
diff --git a/src/components/Layout/style.module.css b/src/components/Layout/style.module.css
@@ -1,4 +1,4 @@
 .body {
   background-color: rgb(26, 26, 26);
-  color: rgb(224, 237, 94);
+  color: rgb(0, 237, 94);
 }
diff --git a/src/components/LocationStat/CitiesStat.tsx b/src/components/LocationStat/CitiesStat.tsx
@@ -15,7 +15,7 @@ const CitiesStat = ({ onClick }: { onClick: (_city: string) => void }) => {
             key={city}
             value={city}
             description={` ${(distance / 1000).toFixed(0)} KM`}
-            citySize={3}
+            citySize={5}
             onClick={() => onClick(city)}
           />
         ))}

diff --git a/src/components/LocationStat/PeriodStat.tsx b/src/components/LocationStat/PeriodStat.tsx
@@ -15,7 +15,7 @@ const PeriodStat = ({ onClick }: { onClick: (_period: string) => void }) => {
             key={type}
             value={`${IS_CHINESE && titleForType(type)} ${times} `}
             description={type + (times>1 ? "s" : "") }
-            citySize={1}
+            citySize={5}
             onClick={() => onClick(type)}
           />
         ))}

diff --git a/src/components/Stat/index.tsx b/src/components/Stat/index.tsx
@@ -19,7 +19,7 @@ const Stat = ({
     <span className={`text-${citySize || 5}xl font-bold italic`}>
       {intComma(value.toString())}
     </span>
-    <span className="text-lg font-semibold italic">{description}</span>
+    <span className="text-2xl font-semibold italic">{description}</span>
   </div>
 );
 

diff --git a/src/components/WorkoutStat/index.tsx b/src/components/WorkoutStat/index.tsx
@@ -4,14 +4,14 @@ import { MAIN_COLOR } from '@/utils/const';
 
 const WorkoutStat = ({value, description, pace, className, distance, onClick, color=MAIN_COLOR}:
                          { value: string, description:string, pace: string, className: string, distance: string, onClick: (_year: string) => void , color: string}) =>
-    (<div className={`${className} pb2 w-100`} onClick={onClick} style={{'color': color}}>
-    <span className={`f1 fw9 i`}>{intComma(value)}</span>
-    <span className="f3 fw6 i">{description}</span>
-    { pace && (<span className="f1 fw9 i">{ " " +pace}</span>)}
-    { pace && (<span className="f3 fw6 i"> Pace</span>)}
+    (<div className={`${className || " "} pb-2 w-100`} onClick={onClick} style={{'color': color}}>
+    <span className={`text-5xl font-bold italic`}>{intComma(value)}</span>
+    <span className="text-2xl font-semibold italic">{description}</span>
+    { pace && (<span className="text-5xl font-bold italic">{ " " +pace}</span>)}
+    { pace && (<span className="text-2xl font-semibold italic"> Pace</span>)}
 
-    { distance && (<span className="f1 fw9 i">{ " " + distance}</span>)}
-    { distance && (<span className="f3 fw6 i"> KM</span>)}
+    { distance && (<span className="text-5xl font-bold italic">{ " " + distance}</span>)}
+    { distance && (<span className="text-2xl font-semibold italic"> KM</span>)}
 
   </div>
 );

diff --git a/src/components/YearStat/index.tsx b/src/components/YearStat/index.tsx
@@ -85,7 +85,7 @@ const YearStat = ({ year, onClick, onClickTypeInYear }: { year: string, onClick:
         <Stat
           value={`${streak} day`}
           description=" Streak"
-          className="mb0 pb0"
+          className="pb-2"
         />
         {hasHeartRate && (
           <Stat value={avgHeartRate} description=" Avg Heart Rate" />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -193,7 +193,7 @@ const Index = () => {
 
   return (
     <Layout>
-      <div className="w-full lg:w-1/3">
+      <div className="w-full lg:w-1/4">
         <h1 className="my-12 text-5xl font-extrabold italic">
           <a href="/">{siteTitle}</a>
         </h1>

diff --git a/yarn.lock b/yarn.lock
@@ -548,6 +548,11 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@surbowl/world-geo-json-zh@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@surbowl/world-geo-json-zh/-/world-geo-json-zh-2.1.3.tgz#e446e27fa89b67d70d47ab8f79ddfe2c194f809a"
+  integrity sha512-6m/eVcSsWvFXYkaEQLHCxJqFSkTMVaDgfTg9weQr2lozyrxxH+SsRTq24DFfCqFX7L9zKtDQcP6+5VKemY1Rcg==
+
 "@svgr/babel-plugin-add-jsx-attribute@8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"