Rewrite CSS with Tailwind CSS

lineageos-infra · Dec 31, 2023 · 8f09469 · 8f09469
1 parent 497e874
commit 8f09469
Show file tree

Hide file tree

Showing 26 changed files with 1,353 additions and 540 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "format": "prettier --write vite.config.js src/"
+    "format": "prettier --write *.config.js src/"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.8",
@@ -24,9 +24,12 @@
     "@rushstack/eslint-patch": "^1.3.3",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/eslint-config-prettier": "^8.0.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
+    "postcss": "^8.4.32",
     "prettier": "^3.0.3",
+    "tailwindcss": "^3.4.0",
     "vite": "^5.0.10"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/src/App.vue b/src/App.vue
@@ -6,16 +6,12 @@
 
 <script>
 import HorizontalLoader from './components/utils/HorizontalLoader.vue'
-import { applyAppTheme } from './js/ThemeUtils'
 
 export default {
   name: 'App',
   components: {
     HorizontalLoader
   },
-  mounted() {
-    applyAppTheme()
-  },
   computed: {
     anyLoading() {
       return !!this.$store.getters.ongoingRequests
@@ -32,12 +28,6 @@ export default {
   display: flex;
 
   font-family: 'Roboto', sans-serif;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-#app.dark {
-  background: #121212;
-  color: rgba(255, 255, 255, 0.87);
 }
 
 #sidebar {

diff --git a/src/components/builds-tab/BuildsTabPage.vue b/src/components/builds-tab/BuildsTabPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="builds-tab-page tab-page">
-    <div class="list-container" data-simplebar v-if="builds.length > 0">
-      <div class="list">
+  <div class="builds-tab-page w-full h-full flex flex-col">
+    <div class="flex-grow w-full h-full overflow-auto" data-simplebar v-if="builds.length > 0">
+      <div class="min-w-0 max-w-[756px] mx-auto px-8">
         <div class="header">
           <h1>Download builds</h1>
           <p>
@@ -19,9 +19,13 @@
           </p>
         </div>
         <div class="list-label">Latest</div>
-        <template v-for="build in builds" :key="build.id">
-          <downloadable-group :items="build.files"></downloadable-group>
-        </template>
+        <downloadable-group
+          v-for="(build, idx) in builds"
+          :key="build.id"
+          :items="build.files"
+          :class="{ 'border rounded-2xl border-opacity-25 dark:border-opacity-25': idx === 0 }"
+        >
+        </downloadable-group>
       </div>
     </div>
     <div class="list-placeholder" v-else>
@@ -95,8 +99,6 @@ export default {
 </script>
 
 <style scoped>
-@import '../../css/tab-page.css';
-
 .builds-tab-page .list-placeholder {
   display: flex;
   align-items: center;
@@ -157,24 +159,4 @@ export default {
     padding: 0px 16px 16px;
   }
 }
-
-div.group:nth-child(3) {
-  border: 1px solid rgba(0, 0, 0, 0.25) !important;
-  border-radius: 16px;
-}
-
-#app.dark div.group:nth-child(3) {
-  border: 1px solid rgba(255, 255, 255, 0.25) !important;
-  border-radius: 16px;
-}
-
-.group {
-  padding: 24px 18px 24px 24px;
-}
-
-@media (max-width: 479px) {
-  .group {
-    padding: 16px 10px 16px 16px;
-  }
-}
 </style>
diff --git a/src/components/changes-tab/ChangeTab.vue b/src/components/changes-tab/ChangeTab.vue
@@ -4,11 +4,14 @@
       {{ subject }}
     </a>
     <div class="repository-type">
-      <span class="badge">
+      <span class="badge bg-dark dark:bg-white bg-opacity-15 dark:bg-opacity-15">
         {{ type }}
       </span>
 
-      <span class="badge" v-if="!build?.version">
+      <span
+        class="badge bg-dark dark:bg-white bg-opacity-15 dark:bg-opacity-15"
+        v-if="!build?.version"
+      >
         {{ branch }}
       </span>
 
@@ -68,11 +71,5 @@ export default {
   border-radius: 12px;
   padding: 0 8px;
   margin-right: 8px;
-
-  background: rgba(0, 0, 0, 0.15);
-}
-
-#app.dark .change .badge {
-  background: rgba(255, 255, 255, 0.15);
 }
 </style>
diff --git a/src/components/changes-tab/ChangesGroup.vue b/src/components/changes-tab/ChangesGroup.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="group" v-if="items.length">
-    <div class="group-header" v-if="build">
+  <div
+    class="p-4 border-b border-solid border-black dark:border-white border-opacity-15 dark:border-opacity-15"
+    v-if="items.length"
+  >
+    <div class="text-xs font-medium uppercase text-brand-primary tracking-widest" v-if="build">
       <template v-if="build.filename === 'next'">
         To be included in the next {{ build.version }} build
       </template>
@@ -26,7 +29,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-@import '../../css/group.css';
-</style>
diff --git a/src/components/changes-tab/ChangesTabPage.vue b/src/components/changes-tab/ChangesTabPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="tab-page changes-tab-page">
-    <div class="list-container" ref="scrollable">
-      <div class="list">
+  <div class="w-full h-full flex flex-col">
+    <div class="flex-grow w-full h-full overflow-auto" ref="scrollable">
+      <div class="min-w-0 max-w-[756px] mx-auto px-8">
         <template v-if="model">
           <template v-for="change in buildsChanges" :key="change.id">
             <changes-group v-bind="change"></changes-group>
@@ -108,7 +108,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-@import '../../css/tab-page.css';
-</style>
diff --git a/src/components/device-selector/DeviceItem.vue b/src/components/device-selector/DeviceItem.vue
@@ -55,14 +55,6 @@ export default {
   border-top: 1px solid rgba(0, 0, 0, 0.12);
 }
 
-.device .model {
-  color: rgba(0, 0, 0, 0.25);
-}
-
-#app.dark .device .model {
-  color: rgba(255, 255, 255, 0.25);
-}
-
 .device.selected {
   background: #167c80;
 }

diff --git a/src/components/device-selector/DeviceOem.vue b/src/components/device-selector/DeviceOem.vue
@@ -1,5 +1,9 @@
 <template>
-  <collapsible-item class="oem" v-bind:forceExpanded="forceExpanded" v-show="!hidden">
+  <collapsible-item
+    class="oem border-b border-solid border-black dark:border-white border-opacity-15 dark:border-opacity-15"
+    v-bind:forceExpanded="forceExpanded"
+    v-show="!hidden"
+  >
     <template v-slot:title="{ isExpanded, toggleManualExpansion }">
       <div
         class="title-container"
@@ -11,7 +15,7 @@
         <span class="title">
           {{ name }}
         </span>
-        <i class="mdi mdi-chevron-down icon" v-if="!forceExpanded"> </i>
+        <i class="mdi mdi-chevron-down icon opacity-35" v-if="!forceExpanded"> </i>
       </div>
     </template>
     <template v-slot:content>
@@ -53,15 +57,9 @@ export default {
 
 <style scoped>
 .oem {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-
   user-select: none;
 }
 
-#app.dark .oem {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-}
-
 .oem .title-container {
   line-height: 16px;
 
@@ -88,11 +86,7 @@ export default {
   height: 64px;
   padding: 24px 16px;
 
-  background: rgba(0, 0, 0, 0.12);
-}
-
-#app.dark .oem .title-container.expanded {
-  background: rgba(255, 255, 255, 0.05);
+  @apply bg-black dark:bg-white bg-opacity-10 dark:bg-opacity-5;
 }
 
 .oem .title-container .icon {
@@ -101,24 +95,9 @@ export default {
   transition:
     top 0.25s ease-out,
     transform 0.125s ease-out;
-
-  color: rgba(0, 0, 0, 0.38);
-}
-
-#app.dark .oem .title-container .icon {
-  color: rgba(255, 255, 255, 0.38);
 }
 
 .oem .title-container.expanded .icon {
   transform: rotate(-180deg);
 }
-
-.oem a {
-  text-decoration: none;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-#app.dark .oem a {
-  color: rgba(255, 255, 255, 0.87);
-}
 </style>
diff --git a/src/components/device-selector/DeviceSelector.vue b/src/components/device-selector/DeviceSelector.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="device-selector">
-    <div class="search-container">
+    <div
+      class="search-container text-sm border-b border-solid border-black dark:border-white border-opacity-15 dark:border-opacity-15 focus:border-b-2 focus:border-brand-primary"
+    >
       <input type="text" placeholder="Search..." v-model="filterText" />
-      <i class="mdi mdi-close clear" v-if="filterText" v-on:click="clearFilterText"></i>
+      <i class="mdi mdi-close clear opacity-35" v-if="filterText" v-on:click="clearFilterText"></i>
     </div>
     <div class="oems" data-simplebar>
       <device-oem v-for="oem in oems" v-bind="oem" :key="oem.name"></device-oem>
@@ -153,20 +155,6 @@ export default {
   background: transparent;
 
   transition: border 0.125s ease-out;
-
-  color: rgba(0, 0, 0, 0.87);
-
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-#app.dark .device-selector .search-container input {
-  color: rgba(255, 255, 255, 0.87);
-
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-}
-
-.device-selector .search-container input:focus {
-  border-bottom: 2px solid rgba(22, 124, 128, 255);
 }
 
 .device-selector .search-container .clear {
@@ -182,12 +170,6 @@ export default {
   font-size: 24px;
 
   cursor: pointer;
-
-  color: rgba(0, 0, 0, 0.38);
-}
-
-#app.dark .device-selector .search-container .clear {
-  color: rgba(255, 255, 255, 0.38);
 }
 
 .device-selector .oems {

diff --git a/src/components/devices-tab/DevicesTabPage.vue b/src/components/devices-tab/DevicesTabPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="devices-tab-page tab-page">
-    <div class="list-container">
-      <device-selector class="list"></device-selector>
+  <div class="devices-tab-page w-full h-full flex flex-col">
+    <div class="flex-grow w-full h-full overflow-auto">
+      <device-selector class="h-100"></device-selector>
     </div>
   </div>
 </template>
@@ -16,11 +16,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-@import '../../css/tab-page.css';
-
-.devices-tab-page .list {
-  height: 100%;
-}
-</style>
diff --git a/src/components/downloadable/DownloadableDetail.vue b/src/components/downloadable/DownloadableDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="downloadable-detail">
-    <div class="title">{{ title }}</div>
+    <div class="title opacity-50">{{ title }}</div>
     <div class="value">
       {{ value }}
       <div v-if="title == 'SHA256'">
@@ -58,18 +58,13 @@ export default {
 .downloadable-detail .title {
   width: 20%;
   flex-shrink: 0;
-  color: rgba(0, 0, 0, 0.5);
 }
 
 .downloadable-detail .value a {
   color: #167c80;
   text-decoration: none;
 }
 
-#app.dark .downloadable-detail .title {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 .downloadable-detail .value {
   width: 80%;
   flex-shrink: 0;

diff --git a/src/components/downloadable/DownloadableGroup.vue b/src/components/downloadable/DownloadableGroup.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="group">
-    <div class="group-header" v-if="title">
+  <div
+    class="p-6 md:p-4 border-b border-solid border-black dark:border-white border-opacity-15 dark:border-opacity-15"
+  >
+    <div class="text-xs font-medium uppercase text-brand-primary tracking-widest" v-if="title">
       {{ title }}
     </div>
     <template v-for="item in items" :key="item.id">
@@ -26,7 +28,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-@import '../../css/group.css';
-</style>