Merge pull request #95 from georgejkaye/left-align

[style] Make things left aligned
georgejkaye · Feb 19, 2024 · 3fd7cd6 · 3fd7cd6
2 parents 1d4d0c7 + 0d5c9fe
commit 3fd7cd6
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 12 deletions.
diff --git a/client/src/app/cards/awaiting.tsx b/client/src/app/cards/awaiting.tsx
@@ -29,10 +29,10 @@ const AwaitingClaimCard = (props: {
         },
     ]
     return (
-        <div className="flex align-stretch flex-col justify-evenly items-center desktop:flex-row">
+        <div className="flex flex-col desktop:flex-row">
             <div className="flex flex-col desktop:flex-row flex-1">
                 <BreakDate cookieBreak={props.cookieBreak} />
-                <div className="flex flex-row justify-center items-center mx-4 mb-2 desktop:my-0">
+                <div className="flex flex-row desktop:mx-4 mb-2 desktop:my-0">
                     {formatAsPrice(
                         !props.cookieBreak.cost ? 0 : props.cookieBreak.cost
                     )}
@@ -92,7 +92,7 @@ export const AwaitingClaimCards = (props: {
     }
     return (
         <div>
-            <div className="flex flex-col desktop:flex-row items-center border-t">
+            <div className="flex flex-col desktop:flex-row border-t">
                 <h2 className="flex-1 p-4 text-2xl font-bold">
                     Awaiting claim
                 </h2>

diff --git a/client/src/app/cards/breaks.tsx b/client/src/app/cards/breaks.tsx
@@ -141,8 +141,7 @@ const BreakContent = (props: {
             ? "Host reimbursed"
             : "Host required"
         : props.cookieBreak.host
-    let breakContentStyle =
-        "flex flex-row justify-center items-center mx-4 mb-2 desktop:my-0"
+    let breakContentStyle = "flex flex-row desktop:mx-4 mb-2 desktop:my-0"
     return <div className={breakContentStyle}>{contentText}</div>
 }
 

diff --git a/client/src/app/cards/cards.tsx b/client/src/app/cards/cards.tsx
@@ -41,7 +41,7 @@ export const CardButtons = (props: {
     width: string
     buttons: CardButtonProps[]
 }) => (
-    <div className="w-36 flex justify-center desktop:justify-end">
+    <div className="desktop:w-36 -ml-1 desktop:ml-0 flex desktop:justify-end">
         {props.buttons.map(({ isVisible, icon, onClick }, i) =>
             !isVisible ? (
                 ""

diff --git a/client/src/app/cards/completion.tsx b/client/src/app/cards/completion.tsx
@@ -19,7 +19,7 @@ export const ClaimDetails = (props: { claim: Claim }) => {
             <div className="w-full desktop:w-1/2 my-2 font-bold">
                 {getDatetimeString(props.claim.date)}
             </div>
-            <div className="flex flex-row justify-center items-center mx-4 mb-2 desktop:my-0">
+            <div className="flex flex-row desktop:mx-4 mb-2 desktop:my-0">
                 {formatAsPrice(props.claim.amount)}
             </div>
         </div>
@@ -49,7 +49,7 @@ const AwaitingCompletionCard = (props: {
         },
     ]
     return (
-        <div className="flex align-stretch flex-col justify-evenly items-center desktop:flex-row">
+        <div className="flex align-stretch flex-col desktop:flex-row">
             <ClaimDetails claim={props.claim} />
             {!props.user?.admin ? (
                 ""

diff --git a/client/src/app/cards/reimbursement.tsx b/client/src/app/cards/reimbursement.tsx
@@ -63,7 +63,7 @@ const AwaitingReimbursementCard = (props: {
     }
     return (
         <>
-            <div className="flex align-stretch flex-col justify-evenly items-center desktop:flex-row">
+            <div className="flex align-stretch flex-col desktop:flex-row">
                 <BreakDetails
                     cookieBreak={props.cookieBreak}
                     user={props.user}

diff --git a/client/src/app/cards/upcoming.tsx b/client/src/app/cards/upcoming.tsx
@@ -49,7 +49,7 @@ export const UpcomingBreakCard = (props: {
         },
     ]
     return (
-        <div className="flex align-stretch flex-col justify-evenly items-center desktop:flex-row">
+        <div className="flex align-stretch flex-col desktop:flex-row">
             <BreakDetails
                 cookieBreak={props.cookieBreak}
                 user={props.user}

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -86,10 +86,10 @@ const Home = () => {
                     setLoadingData={setLoadingData}
                 />
                 <div className="m-5 w-mobileContent tablet:w-tabletContent desktop:w-content mx-auto">
-                    <div className="text-center">
+                    <div className="text-lg">
                         The cookie break is the school's longest running social
                         event: every week a different host buys some biscuits up
-                        to the amount of £10 and shares them with everyone else.
+                        to the amount of £15 and shares them with everyone else.
                         Thanks to the gracious funding of Research Committee,
                         they get reimbursed for their troubles!
                     </div>