Removes more styles - just one CSS file now

Author: kiwicopple

example/next-storage/components/Account.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect, ChangeEvent } from 'react'
 import { supabase } from '../lib/api'
 import UploadButton from '../components/UploadButton'
 import Avatar from './Avatar'
-import styles from '../styles/Home.module.css'
 import { AuthSession } from '../../../dist/main'
 import { DEFAULT_AVATARS_BUCKET, Profile } from '../lib/constants'
 
@@ -122,8 +121,8 @@ export default function Account({ session }: { session: AuthSession }) {
         gap: 20,
       }}
     >
-      <div className={styles.card}>
-        <div className={styles.avatarContainer}>
+      <div className="card">
+        <div>
           <Avatar url={avatar} size={270} />
         </div>
         <UploadButton onUpload={uploadAvatar} />

example/next-storage/components/ProfileCard.tsx

@@ -5,8 +5,8 @@ export default function ProfileCard({ profile }: { profile: Profile }) {
   return (
     <div className="card">
       <Avatar url={profile.avatar_url} size={50} />
-      <p>{profile.id}</p>
-      <p>{profile.username}</p>
+      <p>Username: {profile.username}</p>
+      <p>Website: {profile.website}</p>
     </div>
   )
 }

example/next-storage/pages/index.tsx

@@ -3,7 +3,6 @@ import { supabase } from '../lib/api'
 import Auth from '../components/Auth'
 import Account from '../components/Account'
 import ProfileCard from '../components/ProfileCard'
-import styles from '../styles/Home.module.css'
 import { AuthSession, Subscription, SupabaseRealtimePayload } from '../../../dist/main'
 import { Profile } from '../lib/constants'
 
@@ -51,17 +50,27 @@ export default function Home() {
   }
 
   return (
-    <div className={styles.container}>
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
       {!session ? (
         <Auth />
       ) : (
-        <div style={{ display: 'flex', gap: 20 }}>
-          <div>
+        <div style={{ display: 'flex', gap: 20, width: '50%' }}>
+          <div className="flex flex-1">
             <Account key={session.user.id} session={session} />
           </div>
-          <div>
+          <div className="flex flex-1">
             {profiles?.map((profile) => (
-              <ProfileCard profile={profile} key={profile.id} />
+              <div key={profile.id}>
+                <ProfileCard profile={profile} />
+              </div>
             ))}
           </div>
         </div>

example/next-storage/styles/Auth.module.css

@@ -47,6 +47,30 @@ input[disabled] {
   color: var(--custom-color-secondary);
 }
 
+/* Utils */
+
+.block {
+  display: block;
+  width: 100%;
+}
+.inline-block {
+  display: inline-block;
+  width: 100%;
+}
+
+.flex {
+  display: flex;
+}
+.flex.column {
+  flex: column;
+}
+.flex.row {
+  flex: row;
+}
+.flex.flex-1 {
+  flex: 1 1 0;
+}
+
 /* Button */
 
 button {
@@ -62,17 +86,14 @@ button {
   text-transform: uppercase;
 }
 
-button.block {
-  width: 100%;
-}
-
 button.primary {
   background-color: var(--custom-color-brand);
 }
 
 /* Widgets */
 
 .card {
+  width: 100%;
   border: var(--custom-border);
   border-radius: var(--custom-border-radius);
   padding: var(--custom-spacing);