mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Joshen Lim
dfd5461ef9
## Context Part of dashboard scalability project Opting to use the connection string of the project's read replica (if available) for read queries on the database. Trialing with the Table Editor as a first pass - changes involved will opt to use replica connection string for `useTableRowsQuery`, `useTableRowsCountQuery`, and `useForeignKeyConstraintsQuery` There's definitely optimizations to be done for deciding which replica to use - but am starting off with a rather naive logic to prioritize replicas in the same region as the project. ## Changes involved - We're no longer passing `connectionString` as a param into the affected hooks, the `connectionString` is derived from within those hooks instead - Change is feature flagged, so things should be status quo if flag is off (use primary database's connection string) - Added `useConnectionStringForReadOps` hook which returns the replica's connection string if (Otherwise defaults to primary database connection string) - Feature flag is on - Project has a replica available ## To test - [ ] Verify that the table editor works as expected for a project that has read replicas (There shouldn't be any change really) - [ ] Also just double check that updating cells in the table editor works as well (There's no change there, we're using the primary DB's connection string for mutation ops) - [ ] ^ Same thing for a project that doesn't have read replicas - [ ] ^ Same thing for local / self-host
297 lines
6.3 KiB
SCSS
297 lines
6.3 KiB
SCSS
@tailwind components;
|
|
|
|
@import './../../../packages/ui/build/css/source/global.css';
|
|
@import './../../../packages/ui/build/css/themes/dark.css';
|
|
@import './../../../packages/ui/build/css/themes/light.css';
|
|
@import './../../../packages/ui/build/css/themes/classic-dark.css';
|
|
|
|
:root {
|
|
--chart-1: var(--brand-default);
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--chart-warning: hsl(var(--warning-default));
|
|
--chart-destructive: hsl(var(--destructive-default));
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning-default);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
--header-height: 3rem;
|
|
}
|
|
|
|
[data-theme='deep-dark'],
|
|
.deep-dark,
|
|
[data-theme='dark'],
|
|
.dark {
|
|
--chart-1: var(--brand-default);
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
--chart-warning: hsl(var(--warning-default));
|
|
--chart-destructive: hsl(var(--destructive-default));
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning-default);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#__next,
|
|
.main {
|
|
@apply bg-dash-sidebar relative;
|
|
@apply text-foreground;
|
|
@apply overflow-x-clip;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-group .form-text,
|
|
.Form .form-text {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group input[type='text'],
|
|
.form-group input[type='email'],
|
|
.form-group input[type='url'],
|
|
.form-group input[type='password'],
|
|
.form-group input[type='number'],
|
|
.form-group input[type='date'],
|
|
.form-group input[type='datetime-local'],
|
|
.form-group input[type='month'],
|
|
.form-group input[type='search'],
|
|
.form-group input[type='tel'],
|
|
.form-group input[type='time'],
|
|
.form-group input[type='week'],
|
|
.form-group input[multiple],
|
|
.form-group textarea,
|
|
.form-group select,
|
|
input.form-control,
|
|
.form-control input,
|
|
.form-control textarea {
|
|
@apply block;
|
|
@apply box-border;
|
|
// @apply w-full ;
|
|
@apply rounded-md;
|
|
@apply shadow-sm;
|
|
@apply transition-all;
|
|
@apply text-foreground;
|
|
@apply border;
|
|
@apply focus:shadow-md;
|
|
|
|
@apply focus:border-stronger;
|
|
@apply focus:ring-border-overlay;
|
|
|
|
@apply bg-studio;
|
|
@apply border-strong border;
|
|
|
|
@apply outline-none;
|
|
@apply focus:ring-2 focus:ring-current;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
@apply px-4 py-2;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group input[type='text']:focus,
|
|
.form-group input[type='email']:focus,
|
|
.form-group input[type='url']:focus,
|
|
.form-group input[type='password']:focus,
|
|
.form-group input[type='number']:focus,
|
|
.form-group input[type='date']:focus,
|
|
.form-group input[type='datetime-local']:focus,
|
|
.form-group input[type='month']:focus,
|
|
.form-group input[type='search']:focus,
|
|
.form-group input[type='tel']:focus,
|
|
.form-group input[type='time']:focus,
|
|
.form-group input[type='week']:focus,
|
|
.form-group input[multiple]:focus,
|
|
.form-group textarea:focus,
|
|
.form-group select:focus,
|
|
.form-group input:focus .form-control:focus {
|
|
box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.1);
|
|
}
|
|
|
|
// icons in date / time inputs
|
|
.dark input[type='date']::-webkit-calendar-picker-indicator,
|
|
.dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
|
|
.dark input[type='time']::-webkit-calendar-picker-indicator {
|
|
filter: invert(0.8);
|
|
}
|
|
|
|
input.is-invalid {
|
|
@apply bg-red-100;
|
|
@apply border border-red-700;
|
|
@apply focus:ring-red-500;
|
|
@apply placeholder:text-red-600;
|
|
}
|
|
|
|
input::placeholder {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.form-group input::placeholder {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.billing-input-fixed {
|
|
@apply w-full appearance-none rounded border bg-gray-700 py-2 px-3 leading-tight text-gray-300 shadow;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.input-mono {
|
|
input,
|
|
textarea {
|
|
@apply font-mono;
|
|
}
|
|
}
|
|
|
|
.input-sm {
|
|
input,
|
|
textarea {
|
|
@apply text-sm;
|
|
}
|
|
}
|
|
|
|
.input-xs {
|
|
input,
|
|
textarea {
|
|
@apply text-xs;
|
|
}
|
|
}
|
|
|
|
input[type='radio'] {
|
|
@apply p-0;
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance: textfield; /* Firefox, Not included in tailwind styles reset */
|
|
}
|
|
|
|
// TODO: It doesnt' work, need to check
|
|
.hide-scrollbar {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
div[data-radix-portal]:not(.portal--toast) {
|
|
z-index: 2147483646 !important;
|
|
}
|
|
|
|
.billing-compute-radio {
|
|
label {
|
|
@apply items-center justify-between;
|
|
&:last-child {
|
|
opacity: 100 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharts-tooltip-cursor {
|
|
@apply fill-transparent;
|
|
}
|
|
|
|
.expandable-tr {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.expanded-row-content {
|
|
display: grid;
|
|
grid-column: 1/-1;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.multi-select {
|
|
button {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
.text-area-resize-none {
|
|
textarea {
|
|
@apply resize-none;
|
|
}
|
|
}
|
|
|
|
.capitalize-sentence:first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.input-clear {
|
|
input {
|
|
@apply pr-7;
|
|
}
|
|
}
|
|
|
|
// to do: remove this CSS and do the same thing in a reusable tooltip component
|
|
[data-radix-popper-content-wrapper] {
|
|
@apply z-50 #{!important};
|
|
}
|
|
|
|
.settings-container {
|
|
@apply mx-auto max-w-4xl xl:max-w-6xl;
|
|
}
|
|
|
|
.react-grid-item.react-grid-placeholder {
|
|
@apply bg-brand-500 #{!important};
|
|
}
|
|
|
|
.react-grid-item > .react-resizable-handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 3px !important;
|
|
bottom: 3px !important;
|
|
width: 6px !important;
|
|
height: 6px !important;
|
|
@apply border-strong dark:border-r-2 dark:border-b-2 dark:border-overlay #{!important};
|
|
}
|
|
|
|
@keyframes typewriter {
|
|
from {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-caret {
|
|
50% {
|
|
border-color: transparent;
|
|
}
|
|
}
|