lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-07-06 23:34:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add light themed variants for background and text

Browse Source
This commit is contained in:
Harsh Karande
2021-12-11 11:55:37 +05:30
committed by Joshen Lim
parent ef6bec8da9
commit 0b2c8a7cf2
4 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
studio/pages/project/[ref]/api/index.tsx
View File

@@ -124,7 +124,7 @@ const DocView: FC<any> = observer(({}) => {
<div className="Docs--inner-wrapper">
<div className="sticky top-0 w-full flex flex-row-reverse z-40 ">
<div
className="border-b border-gray-500 dark:border-gray-500 bg-gray-700"
className="border-b border-gray-200 dark:border-gray-500 bg-white dark:bg-gray-700"
style={{ width: '50%' }}
>
<div className="z-0 flex ">
@@ -132,8 +132,10 @@ const DocView: FC<any> = observer(({}) => {
type="button"
onClick={() => setSelectedLang('js')}
className={`${
selectedLang == 'js' ? 'text-gray-300' : 'text-gray-400'
} relative inline-flex items-center p-1 px-2 bg-gray-600 border-r border-gray-500 dark:border-gray-500 text-sm font-medium hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
selectedLang == 'js'
? 'text-gray-600 dark:text-gray-300'
: 'text-gray-400 dark:text-gray-400'
} relative inline-flex items-center p-1 px-2 bg-gray-100 dark:bg-gray-600 border-r border-gray-200 dark:border-gray-500 text-sm font-medium hover:text-gray-600 dark:hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
>
JavaScript
</button>
@@ -141,8 +143,10 @@ const DocView: FC<any> = observer(({}) => {
type="button"
onClick={() => setSelectedLang('bash')}
className={`${
selectedLang == 'bash' ? 'text-gray-300' : 'text-gray-400'
} relative inline-flex items-center p-1 px-2 bg-gray-600 border-r border-gray-500 dark:border-gray-500 text-sm font-medium hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
selectedLang == 'bash'
? 'text-gray-600 dark:text-gray-300'
: 'text-gray-400 dark:text-gray-400'
} relative inline-flex items-center p-1 px-2 bg-gray-100 dark:bg-gray-600 border-r border-gray-200 dark:border-gray-500 text-sm font-medium hover:text-gray-600 dark:hover:text-gray-300 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150`}
>
Bash
</button>
@@ -533,8 +537,8 @@ const ResourceContent = ({
<div className="doc-section">
<article className="text ">
<p>
Supabase provides realtime functionality and broadcasts database changes to authorized users depending on Row Level
Security (RLS) policies.
Supabase provides realtime functionality and broadcasts database changes to authorized
users depending on Row Level Security (RLS) policies.
</p>
<p>
<a href="https://supabase.com/docs/client/subscribe" target="_blank">

1
studio/styles/code.scss
View File

@@ -69,7 +69,6 @@
}
.codeBlock {
@apply bg-gray-600;
margin-bottom: 0;
overflow: hidden;
overflow-wrap: break-word;

2
studio/styles/main.scss
View File

@@ -144,7 +144,7 @@ input[type='radio'] {
}
code {
@apply p-1 m-0 font-mono text-sm bg-gray-600 rounded;
@apply p-1 m-0 font-mono text-sm bg-gray-100 dark:bg-gray-600 rounded;
}
div[data-radix-portal]:not(.portal--toast) {

12
studio/styles/ui.scss
View File

@@ -195,10 +195,14 @@ label:not(.sbui-formlayout__label):not(.sbui-checkbox__label-container__label):n
/* Docs */
.Docs {
&--inner-wrapper {
background: linear-gradient(90deg, #1f1f1f 50%, #2a2a2a 50%);
background: linear-gradient(90deg, #ffffff 50%, #eeeeee 50%);
width: 100%;
}
.dark &--inner-wrapper {
background: linear-gradient(90deg, #1f1f1f 50%, #2a2a2a 50%);
}
h1,
h2,
h3 {
@@ -206,13 +210,13 @@ label:not(.sbui-formlayout__label):not(.sbui-checkbox__label-container__label):n
}
.doc-heading {
@apply text-white capitalize mt-4 w-1/2;
@apply text-black dark:text-white capitalize mt-4 w-1/2;
hyphens: auto;
max-width: 50%;
}
.doc-section {
@apply border-b dark:border-dark text-gray-300 flex;
@apply border-b dark:border-dark text-gray-600 dark:text-gray-300 flex;
}
.text {
@@ -233,7 +237,7 @@ label:not(.sbui-formlayout__label):not(.sbui-checkbox__label-container__label):n
}
.code {
@apply flex-1 p-2 w-1/2 bg-gray-600 pb-4;
@apply flex-1 p-2 w-1/2 pb-4;
max-width: 50%;
h4 {