mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-24 22:52:09 -05:00
Updated assets in Appearance menu - do not touch
This commit is contained in:
nizune
parent
362e7452fe
commit
bca01022c0
7 changed files with 311 additions and 159 deletions
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 2.2 MiB |
80
src/pages/settings/assets/dark_old.svg
Normal file
80
src/pages/settings/assets/dark_old.svg
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
|
||||||
|
<g id="Dark" transform="translate(-225 -535)">
|
||||||
|
<g id="Group_188" data-name="Group 188">
|
||||||
|
<rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#333234"/>
|
||||||
|
<path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#212121"/>
|
||||||
|
<g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
|
||||||
|
<g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
|
||||||
|
<rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#373737"/>
|
||||||
|
<rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#efefef"/>
|
||||||
|
<rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#fff"/>
|
||||||
|
<g id="Group_198" data-name="Group 198">
|
||||||
|
<rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
|
||||||
|
<rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="Voice_Channel" data-name="Voice Channel">
|
||||||
|
<rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
|
||||||
|
<rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
|
||||||
|
<g id="Connected_Users" data-name="Connected Users">
|
||||||
|
<circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
|
||||||
|
<circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
|
||||||
|
<circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group_199" data-name="Group 199" transform="translate(0 54)">
|
||||||
|
<rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
|
||||||
|
<rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_200" data-name="Group 200" transform="translate(0 74)">
|
||||||
|
<rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
|
||||||
|
<rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_201" data-name="Group 201" transform="translate(0 94)">
|
||||||
|
<rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
|
||||||
|
<rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#404040"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
|
||||||
|
<circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
|
||||||
|
<rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
|
||||||
|
<rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
|
||||||
|
<rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#fff"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_189" data-name="Group 189">
|
||||||
|
<line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
|
||||||
|
<rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
|
||||||
|
<rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
|
||||||
|
<rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
|
||||||
|
<g id="Group_194" data-name="Group 194" transform="translate(0 2)">
|
||||||
|
<rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
|
||||||
|
<rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#888"/>
|
||||||
|
<line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1"/>
|
||||||
|
</g>
|
||||||
|
<circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
|
||||||
|
<circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
|
||||||
|
<rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
|
||||||
|
<rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
|
||||||
|
<rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#fff"/>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#434343"/>
|
||||||
|
<g id="Rectangle_229" data-name="Rectangle 229" transform="translate(506 709)" fill="#707070" stroke="#707070" stroke-width="1">
|
||||||
|
<path d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
|
||||||
|
<path d="M1,.5H17A3.5,3.5,0,0,1,20.5,4V14A3.5,3.5,0,0,1,17,17.5H1A.5.5,0,0,1,.5,17V1A.5.5,0,0,1,1,.5Z" fill="none"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 2.2 MiB |
77
src/pages/settings/assets/light_old.svg
Normal file
77
src/pages/settings/assets/light_old.svg
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
|
||||||
|
<g id="Light" transform="translate(-225 -535)">
|
||||||
|
<g id="Group_188" data-name="Group 188">
|
||||||
|
<rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#fbfbfb"/>
|
||||||
|
<path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#fff"/>
|
||||||
|
<g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
|
||||||
|
<g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
|
||||||
|
<rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#e8e8e8"/>
|
||||||
|
<rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#5a5a5a"/>
|
||||||
|
<rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#464646"/>
|
||||||
|
<g id="Group_198" data-name="Group 198">
|
||||||
|
<rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
|
||||||
|
<rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
|
||||||
|
</g>
|
||||||
|
<g id="Voice_Channel" data-name="Voice Channel">
|
||||||
|
<rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
|
||||||
|
<rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
|
||||||
|
<g id="Connected_Users" data-name="Connected Users">
|
||||||
|
<circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
|
||||||
|
<circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
|
||||||
|
<circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group_199" data-name="Group 199" transform="translate(0 54)">
|
||||||
|
<rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_200" data-name="Group 200" transform="translate(0 74)">
|
||||||
|
<rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#464646"/>
|
||||||
|
<rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_201" data-name="Group 201" transform="translate(0 94)">
|
||||||
|
<rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
|
||||||
|
<rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
|
||||||
|
<rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#c7c7c7"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
|
||||||
|
<circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
|
||||||
|
<rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
|
||||||
|
<rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
|
||||||
|
<rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
|
||||||
|
<rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#4a4a4a"/>
|
||||||
|
<rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#4a4a4a"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_189" data-name="Group 189">
|
||||||
|
<line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
|
||||||
|
<rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
|
||||||
|
<rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
|
||||||
|
<rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
|
||||||
|
<g id="Group_194" data-name="Group 194" transform="translate(0 2)">
|
||||||
|
<rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
|
||||||
|
<rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#4a4a4a"/>
|
||||||
|
<line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#bfbfbf" stroke-linecap="round" stroke-width="1"/>
|
||||||
|
</g>
|
||||||
|
<circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
|
||||||
|
</g>
|
||||||
|
<g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
|
||||||
|
<circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
|
||||||
|
<rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
|
||||||
|
<rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
|
||||||
|
<rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
|
||||||
|
<rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#4a4a4a"/>
|
||||||
|
<rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#4a4a4a"/>
|
||||||
|
<rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#4a4a4a"/>
|
||||||
|
</g>
|
||||||
|
<rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#ececec"/>
|
||||||
|
<path id="Rectangle_229" data-name="Rectangle 229" d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(506 709)" fill="#bebfc1"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.4 KiB |
|
|
@ -111,6 +111,7 @@ export function Component(props: Props) {
|
||||||
<div className={styles.theme}>
|
<div className={styles.theme}>
|
||||||
<img
|
<img
|
||||||
src={darkSVG}
|
src={darkSVG}
|
||||||
|
draggable={false}
|
||||||
data-active={selected === "dark"}
|
data-active={selected === "dark"}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
selected !== "dark" && setTheme({ preset: "dark" })
|
selected !== "dark" && setTheme({ preset: "dark" })
|
||||||
|
|
@ -172,6 +173,7 @@ export function Component(props: Props) {
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</ComboBox>
|
</ComboBox>
|
||||||
|
{/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.
|
||||||
<p>
|
<p>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={props.settings.theme?.ligatures === true}
|
checked={props.settings.theme?.ligatures === true}
|
||||||
|
|
@ -185,7 +187,7 @@ export function Component(props: Props) {
|
||||||
}>
|
}>
|
||||||
<Text id="app.settings.pages.appearance.ligatures" />
|
<Text id="app.settings.pages.appearance.ligatures" />
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</p>
|
</p>*/}
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
<Text id="app.settings.pages.appearance.emoji_pack" />
|
<Text id="app.settings.pages.appearance.emoji_pack" />
|
||||||
|
|
@ -281,6 +283,9 @@ export function Component(props: Props) {
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
<h3>
|
||||||
|
App
|
||||||
|
</h3>
|
||||||
<div className={styles.overrides}>
|
<div className={styles.overrides}>
|
||||||
{(
|
{(
|
||||||
[
|
[
|
||||||
|
|
|
||||||
|
|
@ -190,7 +190,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
padding: 2rem 1.5rem;
|
padding: 2rem 1.2rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,9 @@
|
||||||
--codeblock-font: "Fira Code";
|
--codeblock-font: "Fira Code";
|
||||||
--sidebar-active: var(--secondary-background);
|
--sidebar-active: var(--secondary-background);
|
||||||
|
|
||||||
|
--background-rgb: (25,25,25); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
|
||||||
|
--background-rgba: rgba(var(--background-rgb), .8); //make the opacity also customizable
|
||||||
|
|
||||||
--input-border-width: 2px;
|
--input-border-width: 2px;
|
||||||
|
|
||||||
--textarea-padding: 16px;
|
--textarea-padding: 16px;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue