From 72d5a43f2ea2e6f8056951d6c63a4da7eeff9d6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= Date: Wed, 1 Nov 2023 23:46:02 +0100 Subject: [PATCH] fix: copy --- public/css/application.css | 351 +++++++++++++++++++++++-------------- views/apps/create.html | 2 +- 2 files changed, 218 insertions(+), 135 deletions(-) diff --git a/public/css/application.css b/public/css/application.css index 2ef85e7b..3c2439fa 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -744,9 +744,12 @@ select { order: 9999; } -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; +.col-span-2 { + grid-column: span 2 / span 2; +} + +.col-span-3 { + grid-column: span 3 / span 3; } .mx-auto { @@ -754,11 +757,6 @@ select { margin-right: auto; } -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - .mb-1 { margin-bottom: 0.25rem; } @@ -791,6 +789,10 @@ select { margin-left: 0.5rem; } +.ml-2\.5 { + margin-left: 0.625rem; +} + .ml-6 { margin-left: 1.5rem; } @@ -799,6 +801,18 @@ select { margin-right: 0.5rem; } +.mr-3 { + margin-right: 0.75rem; +} + +.mr-4 { + margin-right: 1rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + .mt-10 { margin-top: 2.5rem; } @@ -807,6 +821,10 @@ select { margin-top: 0.5rem; } +.mt-24 { + margin-top: 6rem; +} + .mt-4 { margin-top: 1rem; } @@ -819,6 +837,14 @@ select { margin-top: 2rem; } +.-mt-1 { + margin-top: -0.25rem; +} + +.mt-12 { + margin-top: 3rem; +} + .block { display: block; } @@ -839,6 +865,10 @@ select { display: table; } +.grid { + display: grid; +} + .hidden { display: none; } @@ -847,18 +877,34 @@ select { height: 1rem; } -.w-1\/5 { - width: 20%; +.w-16 { + width: 4rem; } -.w-2\/5 { - width: 40%; +.w-24 { + width: 6rem; } .w-4 { width: 1rem; } +.w-40 { + width: 10rem; +} + +.w-5 { + width: 1.25rem; +} + +.w-56 { + width: 14rem; +} + +.w-6 { + width: 1.5rem; +} + .w-8 { width: 2rem; } @@ -875,27 +921,34 @@ select { width: 65px; } -.w-fit { - width: -moz-fit-content; - width: fit-content; -} - .w-full { width: 100%; } -.max-w-sm { - max-width: 24rem; +.w-64 { + width: 16rem; +} + +.w-96 { + width: 24rem; } -.max-w-3xl { - max-width: 48rem; +.max-w-screen-lg { + max-width: 1024px; } .max-w-xs { max-width: 20rem; } +.max-w-screen-sm { + max-width: 640px; +} + +.max-w-sm { + max-width: 24rem; +} + .table-fixed { table-layout: fixed; } @@ -904,6 +957,12 @@ select { cursor: pointer; } +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + .list-inside { list-style-position: inside; } @@ -916,20 +975,24 @@ select { list-style-type: disc; } -.flex-col { - flex-direction: column; +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); } -.flex-wrap { - flex-wrap: wrap; +.grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); } -.items-center { - align-items: center; +.grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); } -.justify-end { - justify-content: flex-end; +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; } .justify-center { @@ -940,6 +1003,16 @@ select { justify-content: space-between; } +.gap-2 { + gap: 0.5rem; +} + +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -976,6 +1049,10 @@ select { border-width: 1px; } +.border-2 { + border-width: 2px; +} + .border-4 { border-width: 4px; } @@ -984,6 +1061,10 @@ select { border-bottom-width: 1px; } +.border-l-2 { + border-left-width: 2px; +} + .border-t { border-top-width: 1px; } @@ -998,14 +1079,14 @@ select { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-orange-200 { +.border-purple-600 { --tw-border-opacity: 1; - border-color: rgb(254 215 170 / var(--tw-border-opacity)); + border-color: rgb(147 51 234 / var(--tw-border-opacity)); } -.border-purple-600 { +.border-purple-700 { --tw-border-opacity: 1; - border-color: rgb(147 51 234 / var(--tw-border-opacity)); + border-color: rgb(126 34 206 / var(--tw-border-opacity)); } .border-red-400 { @@ -1013,14 +1094,9 @@ select { border-color: rgb(248 113 113 / var(--tw-border-opacity)); } -.bg-blue-50 { - --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity)); -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +.border-l-gray-200 { + --tw-border-opacity: 1; + border-left-color: rgb(229 231 235 / var(--tw-border-opacity)); } .bg-gray-50 { @@ -1038,9 +1114,9 @@ select { background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } -.bg-orange-50 { +.bg-purple-100 { --tw-bg-opacity: 1; - background-color: rgb(255 247 237 / var(--tw-bg-opacity)); + background-color: rgb(243 232 255 / var(--tw-bg-opacity)); } .bg-purple-700 { @@ -1065,24 +1141,20 @@ select { padding: 0.625rem; } -.p-3 { - padding: 0.75rem; -} - .p-4 { padding: 1rem; } -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1123,16 +1195,12 @@ select { padding-bottom: 1rem; } -.pb-4 { - padding-bottom: 1rem; -} - -.pl-10 { - padding-left: 2.5rem; +.pb-2 { + padding-bottom: 0.5rem; } -.pl-3 { - padding-left: 0.75rem; +.pb-4 { + padding-bottom: 1rem; } .pl-5 { @@ -1143,12 +1211,12 @@ select { padding-left: 1.5rem; } -.pr-10 { - padding-right: 2.5rem; +.pr-3 { + padding-right: 0.75rem; } -.pr-4 { - padding-right: 1rem; +.pt-1 { + padding-top: 0.25rem; } .pt-4 { @@ -1163,6 +1231,10 @@ select { text-align: center; } +.text-right { + text-align: right; +} + .font-headline { font-family: "Work Sans", "Inter var", Helvetica, Arial, sans-serif; } @@ -1230,11 +1302,6 @@ select { color: rgb(0 0 0 / var(--tw-text-opacity)); } -.text-blue-700 { - --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); -} - .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -1245,29 +1312,29 @@ select { color: rgb(107 114 128 / var(--tw-text-opacity)); } -.text-gray-700 { +.text-gray-600 { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(75 85 99 / var(--tw-text-opacity)); } -.text-gray-900 { +.text-gray-700 { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)); } -.text-green-500 { +.text-gray-800 { --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); + color: rgb(31 41 55 / var(--tw-text-opacity)); } -.text-orange-700 { +.text-gray-900 { --tw-text-opacity: 1; - color: rgb(194 65 12 / var(--tw-text-opacity)); + color: rgb(17 24 39 / var(--tw-text-opacity)); } -.text-purple-600 { +.text-green-500 { --tw-text-opacity: 1; - color: rgb(147 51 234 / var(--tw-text-opacity)); + color: rgb(34 197 94 / var(--tw-text-opacity)); } .text-purple-700 { @@ -1284,6 +1351,10 @@ select { text-decoration-line: underline; } +.opacity-30 { + opacity: 0.3; +} + .opacity-50 { opacity: 0.5; } @@ -1347,11 +1418,6 @@ select { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-purple-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity)); -} - .focus\:ring-purple-700:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity)); @@ -1377,9 +1443,9 @@ select { border-color: rgb(255 255 255 / 0.1); } - .dark\:border-gray-500 { + .dark\:border-gray-400 { --tw-border-opacity: 1; - border-color: rgb(107 114 128 / var(--tw-border-opacity)); + border-color: rgb(156 163 175 / var(--tw-border-opacity)); } .dark\:border-gray-700 { @@ -1387,23 +1453,33 @@ select { border-color: rgb(55 65 81 / var(--tw-border-opacity)); } + .dark\:border-neutral-700 { + --tw-border-opacity: 1; + border-color: rgb(64 64 64 / var(--tw-border-opacity)); + } + .dark\:border-neutral-800 { --tw-border-opacity: 1; border-color: rgb(38 38 38 / var(--tw-border-opacity)); } + .dark\:border-purple-300 { + --tw-border-opacity: 1; + border-color: rgb(216 180 254 / var(--tw-border-opacity)); + } + .dark\:border-white\/10 { border-color: rgb(255 255 255 / 0.1); } - .dark\:bg-gray-600 { - --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); + .dark\:border-l-gray-400 { + --tw-border-opacity: 1; + border-left-color: rgb(156 163 175 / var(--tw-border-opacity)); } - .dark\:bg-orange-900 { + .dark\:bg-purple-900 { --tw-bg-opacity: 1; - background-color: rgb(124 45 18 / var(--tw-bg-opacity)); + background-color: rgb(88 28 135 / var(--tw-bg-opacity)); } .dark\:bg-surface-00dp { @@ -1456,14 +1532,14 @@ select { color: rgb(163 163 163 / var(--tw-text-opacity)); } - .dark\:text-orange-400 { + .dark\:text-purple-400 { --tw-text-opacity: 1; - color: rgb(251 146 60 / var(--tw-text-opacity)); + color: rgb(192 132 252 / var(--tw-text-opacity)); } - .dark\:text-purple-400 { + .dark\:text-purple-500 { --tw-text-opacity: 1; - color: rgb(192 132 252 / var(--tw-text-opacity)); + color: rgb(168 85 247 / var(--tw-text-opacity)); } .dark\:text-white { @@ -1471,6 +1547,11 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity)); } + .dark\:text-neutral-500 { + --tw-text-opacity: 1; + color: rgb(115 115 115 / var(--tw-text-opacity)); + } + .dark\:placeholder-gray-400::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); @@ -1481,16 +1562,13 @@ select { color: rgb(156 163 175 / var(--tw-placeholder-opacity)); } - .dark\:ring-offset-gray-700 { - --tw-ring-offset-color: #374151; - } - .dark\:ring-offset-gray-800 { --tw-ring-offset-color: #1f2937; } - .dark\:\[color-scheme\:dark\] { - color-scheme: dark; + .dark\:invert { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .dark\:hover\:bg-surface-16dp:hover { @@ -1507,10 +1585,6 @@ select { --tw-ring-opacity: 1; --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity)); } - - .dark\:focus\:ring-offset-gray-700:focus { - --tw-ring-offset-color: #374151; - } } @media (min-width: 640px) { @@ -1526,10 +1600,6 @@ select { margin-top: 0px; } - .sm\:flex { - display: flex; - } - .sm\:w-\[250px\] { width: 250px; } @@ -1542,10 +1612,6 @@ select { justify-content: center; } - .sm\:pr-0 { - padding-right: 0px; - } - .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1558,21 +1624,43 @@ select { } @media (min-width: 768px) { - .md\:ml-0 { - margin-left: 0px; + .md\:col-span-1 { + grid-column: span 1 / span 1; } .md\:flex { display: flex; } - .md\:flex-1 { - flex: 1 1 0%; + .md\:table-cell { + display: table-cell; } - .md\:px-0 { - padding-left: 0px; - padding-right: 0px; + .md\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .md\:grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .md\:p-8 { + padding: 2rem; + } + + .md\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .md\:py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } + + .md\:text-base { + font-size: 1rem; + line-height: 1.5rem; } } @@ -1581,14 +1669,19 @@ select { margin-bottom: 1.5rem; } - .lg\:w-8\/12 { - width: 66.666667%; - } - .lg\:p-6 { padding: 1.5rem; } + .lg\:p-8 { + padding: 2rem; + } + + .lg\:px-0 { + padding-left: 0px; + padding-right: 0px; + } + .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; @@ -1599,21 +1692,11 @@ select { padding-right: 1.5rem; } - .lg\:px-8 { - padding-left: 2rem; - padding-right: 2rem; - } - .lg\:py-12 { padding-top: 3rem; padding-bottom: 3rem; } - .lg\:py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; - } - .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; diff --git a/views/apps/create.html b/views/apps/create.html index e538f082..47560ac6 100644 --- a/views/apps/create.html +++ b/views/apps/create.html @@ -3,7 +3,7 @@

- 🚀 Almost there + 🚀 Almost there!

Complete the last step of the setup by pasting or scanning your connection's pairing secret in the desired app to finalise the connection.