wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-09 11:38:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-1155] Fix theming for rebranded stream/admin (#3012)

Browse Source 
* Repair theming and CSS variables for the rebrand

This separates the CSS variables into three sections
for admin, stream, as well as a shared set between
them.

This also adds injection of the raw colours from the
design team into post css variables.

Lastly, this re-maps the existing theme variables to
a new consolidated set with fallbacks for compatibility.

Since this is a singular commit from various WIP commits,
I am crediting @cvle as well as myself for this work.

Thank you all who helped make this rebrand with theming
possible!

CORL-1155

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>

* Convert old css variables in CallOut

* Rename postive/negative => success/error

CORL-1155

* Change some CSS Variable names

* fix TextField/PasswordField colors

Co-authored-by: Chi Vinh Le <vinh@vinh.tech>
This commit is contained in:
Nick Funk
2020-07-15 18:20:25 +00:00
committed by GitHub
co-authored by Chi Vinh Le
parent d4cb9cde9b
commit 5c863f1307
999 changed files with 7189 additions and 17786 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/build/paths.ts
+3 -1
View File
@@ -20,7 +20,9 @@ export default {
appPublicPath: resolveSrc("core/build/publicPath.js"),
appLocales: resolveSrc("locales"),
appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"),
appSassLikeVariables: resolveSrc("core/client/ui/theme/sassLikeVariables.ts"),
appThemeStreamCSS: resolveSrc("core/client/ui/theme/stream.css"),
appThemeAdminCSS: resolveSrc("core/client/ui/theme/admin.css"),
appThemeMixinsCSS: resolveSrc("core/client/ui/theme/mixins.css"),
appStreamHTML: resolveSrc("core/client/stream/index.html"),
src/core/build/postcss.config.js
+15 -11
View File
@@ -3,7 +3,6 @@ require("ts-node/register");
const kebabCase = require("lodash/kebabCase");
const mapKeys = require("lodash/mapKeys");
const mapValues = require("lodash/mapValues");
const pickBy = require("lodash/pickBy");
const flat = require("flat");
const paths = require("./paths").default;
const autoprefixer = require("autoprefixer");
@@ -17,23 +16,28 @@ const postcssMixins = require("postcss-mixins");
const postcssPrependImports = require("postcss-prepend-imports");
const postcssAdvancedVariables = require("postcss-advanced-variables");
delete require.cache[paths.appThemeVariables];
const variables = require(paths.appThemeVariables).default;
const flatKebabVariables = mapKeys(
mapValues(flat(variables, { delimiter: "-" }), (v) => v.toString()),
delete require.cache[paths.appSassLikeVariables];
const sassLikeVariables = require(paths.appSassLikeVariables).default;
const kebabs = mapKeys(
mapValues(flat(sassLikeVariables, { delimiter: "-" }), (v) => v.toString()),
(_, k) => kebabCase(k)
);
// These are sass style variables used in media queries.
const mediaQueryVariables = mapValues(
pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
// Generate sass-style variables to inject into css
const postCssVariables = mapValues(kebabs, (value, key) => {
// Add unit to breakpoints.
// Add 1 to support mobile first approach where we start
// with the smallest screen and gradually add styling for the
// next bigger screen. This is realized using `min-width` without
// ever using `max-width`.
(v) => `${Number.parseInt(v, 10) + 1}px`
);
if (key.toString().startsWith("breakpoints-")) {
return `${Number.parseInt(value, 10) + 1}px`;
}
// Default return the raw value
return value;
});
module.exports = {
// Necessary for external CSS imports to work
@@ -52,7 +56,7 @@ module.exports = {
// Support nesting.
postcssNested(),
// Sass style variables to be used in media queries.
postcssAdvancedVariables({ variables: mediaQueryVariables }),
postcssAdvancedVariables({ variables: postCssVariables }),
// Reduce some calc()
postcssCalcFunction(),
// Provides a modern CSS environment.
src/core/client/account/App/MainLayout.css
+2 -2
View File
@@ -1,10 +1,10 @@
.bar {
height: calc(6 * var(--mini-unit));
background-color: var(--palette-text-primary);
background-color: var(--palette-text-500);
}
.centered {
margin: 10% auto;
padding: 0 calc(0.5 * var(--mini-unit));
box-sizing: border-box;
}
}
src/core/client/account/components/Loading.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { FunctionComponent } from "react";
import { Delay, Flex, Spinner } from "coral-ui/components";
import { Delay, Flex, Spinner } from "coral-ui/components/v2";
const Loading: FunctionComponent = () => (
<Flex justifyContent="center">
src/core/client/account/index.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import { initLocalState } from "./local";
import localesData from "./locales";
// Import css variables.
import "coral-ui/theme/variables.css";
import "coral-ui/theme/stream.css";
async function main() {
await injectConditionalPolyfills();
src/core/client/account/routes/NotFound.css
+5 -5
View File
@@ -1,11 +1,11 @@
.content {
font-family: var(--v2-font-family-secondary);
font-family: var(--font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
font-weight: var(--font-weight-secondary-bold);
font-size: var(--font-size-6);
line-height: var(--line-height-7);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
text-align: center;
}
src/core/client/account/routes/download/Download/DownloadDescription.css
+16 -16
View File
@@ -1,38 +1,38 @@
.title {
font-family: var(--v2-font-family-secondary);
font-family: var(--font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
font-weight: var(--font-weight-secondary-bold);
font-size: var(--font-size-6);
line-height: var(--line-height-7);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
padding-left: var(--v2-spacing-2);
padding-left: var(--spacing-2);
}
.content {
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) var(--v2-spacing-3);
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3);
}
.section {
margin-bottom: var(--v2-spacing-4);
margin-bottom: var(--spacing-4);
}
.sectionText {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-3);
line-height: var(--line-height-5);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-3);
margin-bottom: var(--spacing-3);
}
.list {
list-style: none;
margin-left: calc(-1 * var(--v2-spacing-5));
margin-left: calc(-1 * var(--spacing-5));
}
.list li {
@@ -46,5 +46,5 @@
.bullet {
display: inline-block;
min-width: 16px;
margin-right: var(--v2-spacing-2);
margin-right: var(--spacing-2);
}
src/core/client/account/routes/download/Download/DownloadRoute.css
+2 -2
View File
@@ -6,10 +6,10 @@
.root {
display: inline-block;
max-width: calc(70 * var(--v2-spacing-2));
max-width: calc(70 * var(--spacing-2));
@media (min-width: $breakpoints-xs) {
max-width: calc(60 * var(--v2-spacing-2));
max-width: calc(60 * var(--spacing-2));
}
text-align: left;
src/core/client/account/routes/download/Download/DownloadRoute.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { useToken } from "coral-framework/hooks";
import { createFetch } from "coral-framework/lib/relay";
import { withRouteConfig } from "coral-framework/lib/router";
import { parseHashQuery } from "coral-framework/utils";
import { HorizontalGutter } from "coral-ui/components";
import { HorizontalGutter } from "coral-ui/components/v2";
import DownloadDescription from "./DownloadDescription";
import DownloadForm from "./DownloadForm";
src/core/client/account/routes/email/Confirm/Confirm.css
+26 -26
View File
@@ -1,52 +1,52 @@
.title {
font-family: var(--v2-font-family-secondary);
font-family: var(--font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
font-weight: var(--font-weight-secondary-bold);
font-size: var(--font-size-6);
line-height: var(--line-height-7);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.description {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-3);
line-height: var(--line-height-5);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-3);
margin-bottom: var(--spacing-3);
}
.label {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
font-weight: var(--font-weight-primary-bold);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-1);
margin-bottom: var(--spacing-1);
}
.labelDescription {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
line-height: var(--line-height-4);
color: var(--v2-colors-mono-100);
color: var(--palette-text-100);
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.submit {
margin-top: var(--v2-spacing-5);
margin-bottom: var(--v2-spacing-1);
margin-top: var(--spacing-5);
margin-bottom: var(--spacing-1);
}
src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css
+26 -26
View File
@@ -1,52 +1,52 @@
.title {
font-family: var(--v2-font-family-secondary);
font-family: var(--font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
font-weight: var(--font-weight-secondary-bold);
font-size: var(--font-size-6);
line-height: var(--line-height-7);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.description {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-3);
line-height: var(--line-height-5);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-3);
margin-bottom: var(--spacing-3);
}
.label {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
font-weight: var(--font-weight-primary-bold);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-1);
margin-bottom: var(--spacing-1);
}
.labelDescription {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
line-height: var(--line-height-4);
color: var(--v2-colors-mono-100);
color: var(--palette-text-100);
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.submit {
margin-top: var(--v2-spacing-5);
margin-bottom: var(--v2-spacing-1);
margin-top: var(--spacing-5);
margin-bottom: var(--spacing-1);
}
src/core/client/account/routes/password/Reset/Reset.css
+26 -26
View File
@@ -1,52 +1,52 @@
.title {
font-family: var(--v2-font-family-secondary);
font-family: var(--font-family-secondary);
font-style: normal;
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-7);
font-weight: var(--font-weight-secondary-bold);
font-size: var(--font-size-6);
line-height: var(--line-height-7);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.description {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-5);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-3);
line-height: var(--line-height-5);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-3);
margin-bottom: var(--spacing-3);
}
.label {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-3);
font-weight: var(--font-weight-primary-bold);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
color: var(--v2-colors-mono-500);
color: var(--palette-text-500);
margin-bottom: var(--v2-spacing-1);
margin-bottom: var(--spacing-1);
}
.labelDescription {
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
font-style: normal;
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-4);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
line-height: var(--line-height-4);
color: var(--v2-colors-mono-100);
color: var(--palette-text-100);
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.submit {
margin-top: var(--v2-spacing-5);
margin-bottom: var(--v2-spacing-1);
margin-top: var(--spacing-5);
margin-bottom: var(--spacing-1);
}
src/core/client/admin/App/DecisionHistory/ApprovedIcon.css
+1 -1
View File
@@ -1,3 +1,3 @@
.root {
color: var(--v2-palette-success-main);
color: var(--palette-success-500);
}
src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css
+1 -1
View File
@@ -3,6 +3,6 @@
}
.historyIcon {
color: var(--v2-palette-text-secondary);
color: var(--palette-text-100);
margin-right: 10px;
}
src/core/client/admin/App/DecisionHistory/DecisionItem.css
+2 -2
View File
@@ -1,5 +1,5 @@
.root {
padding: var(--v2-spacing-2) var(--v2-spacing-1);
padding: var(--spacing-2) var(--spacing-1);
}
.leftCol {
@@ -8,5 +8,5 @@
flex-grow: 0;
flex-shrink: 0;
padding-top: 3px;
margin-right: var(--v2-spacing-2);
margin-right: var(--spacing-2);
}
src/core/client/admin/App/DecisionHistory/DecisionList.css
+1 -1
View File
@@ -1,4 +1,4 @@
$decisionHistoryBorderColor: var(--v2-colors-grey-300);
$decisionHistoryBorderColor: var(--palette-grey-300);
.root {
margin: 0;
src/core/client/admin/App/DecisionHistory/DotDivider.css
+4 -4
View File
@@ -1,7 +1,7 @@
.root {
height: 100%;
font-size: var(--v2-font-size-1);
line-height: var(--v2-line-height-reset);
color: var(--v2-colors-mono-100);
padding: 0 var(--v2-spacing-1);
font-size: var(--font-size-1);
line-height: var(--line-height-3);
color: var(--palette-text-100);
padding: 0 var(--spacing-1);
}
src/core/client/admin/App/DecisionHistory/Empty.css
+4 -4
View File
@@ -3,8 +3,8 @@
}
.text {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-body-short);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
line-height: var(--line-height-4);
}
src/core/client/admin/App/DecisionHistory/Footer.css
+1 -1
View File
@@ -1,3 +1,3 @@
.root {
margin-top: var(--v2-spacing-1);
margin-top: var(--spacing-1);
}
src/core/client/admin/App/DecisionHistory/GoToCommentLink.css
+6 -6
View File
@@ -1,10 +1,10 @@
$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;
.root {
line-height: var(--v2-line-height-reset);
font-weight: var(--v2-font-weight-primary-bold);
font-family: var(--v2-font-family-primary);
font-size: var(--v2-font-size-1);
line-height: var(--line-height-3);
font-weight: var(--font-weight-primary-bold);
font-family: var(--font-family-primary);
font-size: var(--font-size-1);
color: $moderateCardDecisionHistoryLinkTextColor;
font-style: var(--v2-font-style-underline);
font-style: var(--font-style-underline);
}
src/core/client/admin/App/DecisionHistory/Info.css
+5 -5
View File
@@ -8,9 +8,9 @@
word-break: break-all;
/* Fallback end */
word-break: break-word;
color: var(--v2-palette-text-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-body-short);
font-size: var(--v2-font-size-2);
color: var(--palette-text-500);
font-weight: var(--font-weight-primary-semi-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-4);
font-size: var(--font-size-2);
}
src/core/client/admin/App/DecisionHistory/RejectedIcon.css
+1 -1
View File
@@ -1,3 +1,3 @@
.root {
color: var(--v2-palette-error-main);
color: var(--palette-error-500);
}
src/core/client/admin/App/DecisionHistory/ShowMoreButton.css
+9 -9
View File
@@ -1,20 +1,20 @@
$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
$moderateCardDecisionHistoryBorderColor: var(--v2-colors-grey-300);
$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;
$moderateCardDecisionHistoryBorderColor: var(--palette-grey-300);
.root {
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-reset);
font-size: var(--font-size-2);
font-weight: var(--font-weight-primary-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-3);
text-transform: uppercase;
color: $moderateCardDecisionHistoryLinkTextColor;
width: 100%;
border-top: 1px solid $moderateCardDecisionHistoryBorderColor;
text-align: center;
padding-top: var(--v2-spacing-1);
padding-bottom: var(--v2-spacing-1);
padding-top: var(--spacing-1);
padding-bottom: var(--spacing-1);
&:disabled {
color: var(--v2-palette-grey-lighter);
color: var(--palette-grey-300);
}
}
src/core/client/admin/App/DecisionHistory/Timestamp.css
+5 -5
View File
@@ -1,9 +1,9 @@
$timestampColor: var(--v2-colors-mono-100);
$timestampColor: var(--palette-text-100);
.root {
color: $timestampColor;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-1);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-bold);
font-size: var(--font-size-1);
line-height: var(--line-height-3);
}
src/core/client/admin/App/DecisionHistory/Title.css
+10 -10
View File
@@ -1,23 +1,23 @@
$decisionHistoryBorderColor: var(--v2-colors-grey-300);
$decisionHistoryTitleBackgroundColor: var(--v2-colors-grey-200);
$decisionHistoryBorderColor: var(--palette-grey-300);
$decisionHistoryTitleBackgroundColor: var(--palette-grey-200);
.root {
background: $decisionHistoryTitleBackgroundColor;
padding: var(--v2-spacing-1);
color: var(--v2-palette-text-primary);
padding: var(--spacing-1);
color: var(--palette-text-500);
border-bottom: 1px solid $decisionHistoryBorderColor;
font-size: var(--v2-font-size-icon-medium);
}
.icon {
margin-right: var(--v2-spacing-2);
font-size: var(--font-size-icon-md);
margin-right: var(--spacing-2);
}
.text {
text-transform: uppercase;
font-weight: var(--v2-font-weight-primary-bold);
color: var(--v2-palette-text-primary);
font-size: var(--v2-font-size-2);
font-weight: var(--font-weight-primary-bold);
color: var(--palette-text-500);
font-size: var(--font-size-2);
line-height: 1;
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
}
src/core/client/admin/App/DecisionHistory/Username.css
+5 -5
View File
@@ -1,9 +1,9 @@
$moderateCardDecisionHistoryColor: var(--v2-colors-mono-900);
$moderateCardDecisionHistoryColor: var(--palette-text-900);
.root {
color: $moderateCardDecisionHistoryColor;
font-weight: var(--v2-font-weight-secondary-bold);
font-family: var(--v2-font-family-secondary);
line-height: var(--v2-line-height-body-short);
font-size: var(--v2-font-size-3);
font-weight: var(--font-weight-secondary-bold);
font-family: var(--font-family-secondary);
line-height: var(--line-height-field-description);
font-size: var(--font-size-3);
}
src/core/client/admin/App/GlobalNotification/NotificationContainer.tsx
+1
View File
@@ -1,4 +1,5 @@
import React, { FunctionComponent } from "react";
import useNotification from "./useNotification";
const NotificationContainer: FunctionComponent<{}> = () => {
src/core/client/admin/App/Main.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { LogoHorizontal } from "coral-ui/components";
import { LogoHorizontal } from "coral-ui/components/v2";
import { AppBar, Begin, Divider, End } from "coral-ui/components/v2/AppBar";
import { DecisionHistoryButton } from "./DecisionHistory";
src/core/client/admin/App/UserMenu/UserMenu.css
+3 -3
View File
@@ -1,4 +1,4 @@
$userMenuButtonColor: var(--v2-colors-mono-100);
$userMenuButtonColor: var(--palette-text-100);
.button {
padding-top: 0;
@@ -11,9 +11,9 @@ $userMenuButtonColor: var(--v2-colors-mono-100);
}
.buttonText {
font-family: var(--v2-font-family-secondary);
font-family: var(--font-family-secondary);
color: $userMenuButtonColor;
font-size: var(--v2-font-size-4);
font-size: var(--font-size-4);
margin-left: 2px;
margin-right: 1px;
}
src/core/client/admin/App/Version.css
+2 -2
View File
@@ -1,6 +1,6 @@
.version {
font-size: calc(10rem / var(--rem-base));
color: var(--palette-text-secondary);
font-size: 0.625rem;
color: var(--palette-text-100);
text-align: center;
padding-bottom: var(--spacing-3);
}
src/core/client/admin/App/Version.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { FunctionComponent } from "react";
import { Typography } from "coral-ui/components";
import { Typography } from "coral-ui/components/v2";
import styles from "./Version.css";
src/core/client/admin/components/AuthBox.css
+3 -3
View File
@@ -1,8 +1,8 @@
.container {
width: 385px;
background-color: var(--v2-colors-grey-100);
border: 1px solid var(--v2-colors-grey-300);
background-color: var(--palette-grey-100);
border: 1px solid var(--palette-grey-300);
margin-top: 70px;
padding: var(--v2-spacing-6);
padding: var(--spacing-6);
box-sizing: border-box;
}
src/core/client/admin/components/Comment/CommentContent.css
+10 -10
View File
@@ -1,20 +1,20 @@
$comment-content: var(--v2-colors-mono-900);
$comment-blockquote-bg: var(--v2-colors-grey-100);
$comment-highlight-bg: var(--v2-colors-yellow-500);
$comment-link: var(--v2-palette-primary-main);
$comment-link-active: var(--v2-palette-primary-darkest);
$comment-content: var(--palette-text-900);
$comment-blockquote-bg: var(--palette-grey-100);
$comment-highlight-bg: var(--palette-warning-500);
$comment-link: $colors-teal-700;
$comment-link-active: $colors-teal-900;
.root {
composes: bodyCommentV2 from "~coral-ui/shared/typography.css";
font-family: var(--v2-font-family-primary);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-body-comment);
font-size: var(--font-size-3);
font-weight: var(--font-weight-primary-regular);
font-family: var(--font-family-primary);
line-height: var(--line-height-comment-body);
color: $comment-content;
overflow-wrap: break-word;
b,
strong {
font-weight: var(--v2-font-weight-primary-bold);
font-weight: var(--font-weight-primary-bold);
}
i,
em {
src/core/client/admin/components/Comment/InReplyTo.css
+13 -13
View File
@@ -1,24 +1,24 @@
$moderateCardIconColor: var(--v2-colors-mono-100);
$moderateCardInReplyToColor: var(--v2-colors-mono-100);
$moderateCardInReplyToUsernameColor: var(--v2-colors-mono-500);
$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
$moderateCardIconColor: var(--palette-text-100);
$moderateCardInReplyToColor: var(--palette-text-100);
$moderateCardInReplyToUsernameColor: var(--palette-text-500);
$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
.icon {
color: $moderateCardIconColor;
}
.inReplyTo {
color: $moderateCardInReplyToColor;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
}
.username {
color: $moderateCardInReplyToUsernameColor;
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-secondary);
font-weight: var(--font-weight-secondary-bold);
font-size: var(--font-size-3);
line-height: var(--line-height-3);
padding: var(--spacing-1);
@@ -38,5 +38,5 @@ $moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
.usernameButton {
vertical-align: baseline;
margin-left: calc(-1 * var(--v2-spacing-1));
margin-left: calc(-1 * var(--spacing-1));
}
src/core/client/admin/components/Comment/Username.css
+5 -5
View File
@@ -1,9 +1,9 @@
$moderateCardUsernameColor: var(--v2-colors-mono-900);
$moderateCardUsernameColor: var(--palette-text-900);
.root {
font-size: var(--v2-font-size-3);
font-weight: var(--v2-font-weight-secondary-bold);
font-family: var(--v2-font-family-secondary);
line-height: var(--v2-line-height-reset);
font-size: var(--font-size-3);
font-weight: var(--font-weight-secondary-bold);
font-family: var(--font-family-secondary);
line-height: var(--line-height-3);
color: $moderateCardUsernameColor;
}
src/core/client/admin/components/Comment/UsernameButton.css
+5 -5
View File
@@ -1,21 +1,21 @@
$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
.root {
margin-right: var(--mini-unit);
padding: var(--spacing-1);
margin-left: calc(-1 * var(--v2-spacing-1));
margin-left: calc(-1 * var(--spacing-1));
line-height: var(--v2-line-height-reset);
line-height: var(--line-height-3);
&:hover {
background-color: $moderateCardUsernameBackgroundHover;
border-radius: var(--v2-round-corners);
border-radius: var(--round-corners);
border-style: none;
}
&:active {
background-color: $moderateCardUsernameBackgroundHover;
border-radius: var(--v2-round-corners);
border-radius: var(--round-corners);
border-style: none;
}
}
src/core/client/admin/components/Comment/UsernameButton.tsx
+1
View File
@@ -2,6 +2,7 @@ import cn from "classnames";
import React, { FunctionComponent } from "react";
import { BaseButton } from "coral-ui/components/v2";
import Username from "./Username";
import styles from "./UsernameButton.css";
src/core/client/admin/components/ConversationModal/ConversationModal.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { FunctionComponent } from "react";
import { Modal } from "coral-ui/components";
import { Modal } from "coral-ui/components/v2";
import ConversationModalQuery from "./ConversationModalQuery";
src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css
+11 -11
View File
@@ -1,31 +1,31 @@
$conversationModalHighlightBackground: var(--v2-colors-teal-100);
$conversationModalCommentText: var(--v2-colors-mono-500);
$conversationModalHighlightBackground: $colors-teal-100;
$conversationModalCommentText: var(--palette-text-500);
.root {
flex: 1;
}
.line {
border-color: var(--v2-colors-grey-400);
border-color: var(--palette-grey-400);
}
.adornments {
margin-right: var(--v2-spacing-2);
margin-right: var(--spacing-2);
}
.circle {
margin-top: var(--v2-spacing-2);
margin-bottom: var(--v2-spacing-2);
margin-top: var(--spacing-2);
margin-bottom: var(--spacing-2);
}
.highlightedCircle {
margin-top: var(--v2-spacing-1);
margin-top: var(--spacing-1);
}
.highlighted {
background-color: $conversationModalHighlightBackground;
padding: var(--v2-spacing-2);
padding-top: var(--v2-spacing-1);
margin-bottom: var(--v2-spacing-2);
padding: var(--spacing-2);
padding-top: var(--spacing-1);
margin-bottom: var(--spacing-2);
}
.commentText {
@@ -33,5 +33,5 @@ $conversationModalCommentText: var(--v2-colors-mono-500);
}
.showReplies {
padding-left: var(--v2-spacing-2);
padding-left: var(--spacing-2);
}
src/core/client/admin/components/ConversationModal/ConversationModalContainer.css
+2 -2
View File
@@ -1,10 +1,10 @@
.root {
}
.topCircle {
margin-right: var(--v2-spacing-2);
margin-right: var(--spacing-2);
}
.bottomCircleContainer {
width: 8px;
padding-top: var(--v2-spacing-1);
padding-top: var(--spacing-1);
}
src/core/client/admin/components/ConversationModal/ConversationModalHeaderContainer.css
+7 -7
View File
@@ -1,17 +1,17 @@
$modal-header-text: var(--v2-colors-mono-900);
$modal-header-text: var(--palette-text-900);
.title {
font-size: var(--v2-font-size-4);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
line-height: var(--v2-line-height-title);
font-size: var(--font-size-4);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
line-height: var(--line-height-5);
color: $modal-header-text;
margin: 0;
}
.conversationTitle {
font-weight: var(--v2-font-weight-primary-semi-bold);
font-weight: var(--font-weight-primary-semi-bold);
text-transform: uppercase;
display: block;
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
src/core/client/admin/components/ConversationModal/ConversationModalQuery.css
+1 -1
View File
@@ -4,5 +4,5 @@
}
.body {
padding: var(--v2-spacing-4);
padding: var(--spacing-4);
}
src/core/client/admin/components/ConversationModal/ConversationModalRepliesContainer.css
+2 -2
View File
@@ -1,7 +1,7 @@
.comment {
padding-left: calc(var(--v2-spacing-4));
padding-left: calc(var(--spacing-4));
}
.footer {
padding-left: calc(var(--v2-spacing-4));
padding-left: calc(var(--spacing-4));
}
src/core/client/admin/components/ModalBodyText.css
+5 -5
View File
@@ -1,9 +1,9 @@
$modal-body-text: var(--v2-colors-mono-500);
$modal-body-text: $colors-mono-500;
.root {
font-size: var(--v2-font-size-3);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
line-height: var(--v2-line-height-body-short);
font-size: var(--font-size-3);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
line-height: var(--line-height-field-description);
color: $modal-body-text;
}
src/core/client/admin/components/ModalHeader.css
+5 -5
View File
@@ -1,10 +1,10 @@
$modal-text: var(--v2-colors-mono-500);
$modal-text: $colors-mono-500;
.root {
font-size: var(--v2-font-size-5);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
line-height: var(--v2-line-height-title);
font-size: var(--font-size-5);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
line-height: var(--line-height-title);
color: $modal-text;
margin: 0;
}
src/core/client/admin/components/ModalHeaderUsername.css
+3 -3
View File
@@ -1,8 +1,8 @@
$status-modal-username: var(--v2-colors-mono-900);
$status-modal-username: $colors-mono-900;
.root {
font-weight: var(--v2-font-weight-secondary-bold);
font-family: var(--v2-font-family-secondary);
font-weight: var(--font-weight-secondary-bold);
font-family: var(--font-family-secondary);
color: $status-modal-username;
font-size: 1.4rem;
}
src/core/client/admin/components/ModerateCard/ApproveButton.css
+17 -7
View File
@@ -1,9 +1,9 @@
$moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
$moderateCardButtonOutlineApproveColor: var(--palette-success-500);
.root {
border: 1px solid $moderateCardButtonOutlineApproveColor;
box-sizing: border-box;
border-radius: var(--v2-round-corners);
border-radius: var(--round-corners);
width: 65px;
height: 50px;
display: flex;
@@ -12,14 +12,24 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
color: $moderateCardButtonOutlineApproveColor;
&:not(:disabled):active {
background-color: $moderateCardButtonOutlineApproveColor;
color: var(--v2-colors-pure-white);
color: var(--palette-text-000);
}
}
.readOnly {
background-color: transparent;
border-color: var(--v2-colors-grey-300);
color: var(--v2-colors-grey-300);
border-color: $colors-grey-300);
color: $colors-grey-300);
&:hover {
cursor: not-allowed;
}
}
.readOnly {
background-color: transparent;
border-color: $colors-grey-300;
color: $colors-grey-300;
&:hover {
cursor: not-allowed;
@@ -29,10 +39,10 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
.invert {
background-color: $moderateCardButtonOutlineApproveColor;
border-color: $moderateCardButtonOutlineApproveColor;
color: var(--v2-colors-pure-white);
color: var(--palette-text-000);
}
.icon {
font-weight: var(--v2-font-weight-primary-semi-bold);
font-weight: var(--font-weight-primary-semi-bold);
color: inherit;
}
src/core/client/admin/components/ModerateCard/CommentAuthorContainer.css
+1 -1
View File
@@ -1,3 +1,3 @@
.authorStatus {
padding-right: var(--spacing-2);
}
}
src/core/client/admin/components/ModerateCard/FeatureButton.css
+16 -16
View File
@@ -3,7 +3,7 @@
right: 0px;
top: 2px;
border: 1px solid var(--v2-palette-grey-main);
border: 1px solid var(--palette-grey-500);
box-sizing: border-box;
border-radius: var(--round-corners);
padding: 2px var(--spacing-2) 2px var(--spacing-2);
@@ -11,34 +11,34 @@
justify-content: center;
align-items: center;
color: var(--v2-palette-grey-main);
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-regular);
font-family: var(--v2-font-family-primary);
color: var(--palette-grey-500);
font-size: var(--font-size-2);
font-weight: var(--font-weight-primary-regular);
font-family: var(--font-family-primary);
line-height: 1.2;
&:active {
background-color: var(--v2-palette-primary-lightest);
border-color: var(--v2-palette-primary-main);
color: var(--v2-palette-primary-main);
background-color: $colors-teal-100;
border-color: $colors-teal-700;
color: $colors-teal-700;
}
&:disabled {
cursor: not-allowed;
background-color: transparent;
border-color: var(--v2-colors-grey-300);
color: var(--v2-colors-grey-300);
border-color: var(--palette-grey-300);
color: var(--palette-grey-300);
}
}
.invert {
background-color: var(--v2-palette-primary-main);
border-color: var(--v2-palette-primary-main);
color: var(--v2-palette-text-light);
background-color: $colors-teal-700;
border-color: $colors-teal-700;
color: var(--palette-text-000);
&:disabled {
color: var(--v2-colors-pure-white);
border-color: var(--v2-colors-grey-300);
background-color: var(--v2-colors-grey-300);
color: var(--palette-text-000);
border-color: var(--palette-grey-300);
background-color: var(--palette-grey-300);
}
}
src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css
+5 -5
View File
@@ -1,9 +1,9 @@
$moderateCardFlagsCategoryColor: var(--v2-colors-mono-500);
$moderateCardFlagsCategoryColor: var(--palette-text-500);
.category {
font-size: var(--v2-font-size-3);
font-weight: var(--v2-font-weight-primary-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-body-short);
font-size: var(--font-size-3);
font-weight: var(--font-weight-primary-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-6);
color: $moderateCardFlagsCategoryColor;
}
src/core/client/admin/components/ModerateCard/FlagDetailsContainer.css
+1 -1
View File
@@ -1,3 +1,3 @@
.detailsDivider {
border-top: 1px solid var(--v2-colors-grey-100);
border-top: 1px solid $colors-grey-100;
}
src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css
+18 -17
View File
@@ -1,39 +1,40 @@
$moderateCardFlagUsernameColor: var(--v2-colors-mono-900);
$moderateCardReasonTextColor: var(--v2-colors-mono-500);
$moderateCardFlagUsernameColor: var(--palette-text-900);
$moderateCardReasonTextColor: var(--palette-text-500);
.user {
color: $moderateCardFlagUsernameColor;
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-secondary-bold);
font-family: var(--v2-font-family-secondary);
line-height: var(--v2-line-height-title);
font-size: var(--font-size-2);
font-weight: var(--font-weight-secondary-bold);
font-family: var(--font-family-secondary);
line-height: var(--line-height-3);
padding-right: calc(0.5 * var(--mini-unit));
}
.details {
color: $moderateCardReasonTextColor;
display: block;
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-regular);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-title);
font-size: var(--font-size-2);
font-weight: var(--font-weight-primary-regular);
font-family: var(--font-family-primary);
line-height: var(--line-height-3);
}
.flagger {
line-height: var(--v2-line-height-reset);
line-height: var(--line-height-3);
margin-right: var(--mini-unit);
padding: var(--v2-spacing-1);
margin-left: calc(-1 * var(--v2-spacing-1));
padding: var(--spacing-1);
margin-left: calc(-1 * var(--spacing-1));
&:hover {
background-color: var(--v2-palette-grey-lightest);
border-radius: var(--v2-round-corners);
background-color: var(--palette-grey-200);
border-radius: var(--round-corners);
border-style: none;
}
&:active {
background-color: var(--v2-palette-grey-lighter);
border-radius: var(--v2-round-corners);
background-color: var(--palette-grey-300);
border-radius: var(--round-corners);
border-style: none;
}
}
src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css
+4 -4
View File
@@ -1,8 +1,8 @@
.label {
font-size: calc(16rem / var(--rem-base));
font-weight: var(--font-weight-regular);
font-family: var(--font-family-sans-serif);
color: var(--palette-text-primary);
font-size: var(--font-size-3);
font-weight: var(--font-weight-primary-regular);
font-family: var(--font-family-primary);
color: var(--palette-text-500);
}
.buttonContainer {
src/core/client/admin/components/ModerateCard/Markers.css
+5 -4
View File
@@ -1,9 +1,10 @@
$moderateCardDetailsHeaderColor: var(--v2-colors-mono-500);
$moderateCardDetailsHeaderColor: var(--palette-text-500);
$moderateCardDetailsDividerColor: var(--palette-grey-100);
.detailsButton {
font-size: var(--v2-font-size-1);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--font-size-1);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
line-height: 1.28;
height: 100%;
padding: 2px 0px;
src/core/client/admin/components/ModerateCard/Media.css
+6 -6
View File
@@ -1,5 +1,5 @@
.embed {
margin: var(--v2-spacing-2) 0;
margin: var(--spacing-2) 0;
}
.toggle {
@@ -16,14 +16,14 @@
}
.playIcon {
color: var(--v2-colors-pure-white);
color: var(--palette-text-000);
}
.playText {
color: var(--v2-colors-pure-white);
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-bold);
font-family: var(--v2-font-family-primary);
color: var(--palette-text-000);
font-size: var(--font-size-2);
font-weight: var(--font-weight-primary-bold);
font-family: var(--font-family-primary);
text-transform: uppercase;
margin: 0;
}
src/core/client/admin/components/ModerateCard/ModerateCard.css
+55 -55
View File
@@ -1,18 +1,18 @@
$moderateCardTimestampColor: var(--v2-colors-mono-100);
$moderateCardEditedColor: var(--v2-colors-mono-100);
$moderateCardAuthorStatusColor: var(--v2-colors-mono-100);
$moderateCardDecisionColor: var(--v2-colors-mono-500);
$moderateCardStoryTitleColor: var(--v2-colors-mono-500);
$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
$moderateCardLinkTextColor: var(--v2-colors-teal-700);
$moderateCardTimestampColor: var(--palette-text-100);
$moderateCardEditedColor: var(--palette-text-100);
$moderateCardAuthorStatusColor: var(--palette-text-100);
$moderateCardDecisionColor: var(--palette-text-500);
$moderateCardStoryTitleColor: var(--palette-text-500);
$moderateCardUsernameBackgroundHover: var(--palette-grey-200);
$moderateCardLinkTextColor: $colors-teal-700;
.topBar {
position: relative;
margin-bottom: var(--v2-spacing-1);
margin-bottom: var(--spacing-1);
}
.topBarMini {
margin-bottom: var(--v2-spacing-4);
margin-bottom: var(--spacing-4);
}
.inReplyTo {
@@ -25,7 +25,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
.mainContainer {
flex-grow: 1;
margin-right: calc(2 * var(--v2-spacing-5));
margin-right: calc(2 * var(--spacing-5));
}
.contentArea {
@@ -52,7 +52,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
No reply to field, so we align below the fattest element
which is the feature button.
*/
padding-top: calc(var(--v2-font-size-2) + 7px + var(--v2-spacing-4));
padding-top: calc(var(--font-size-2) + 7px + var(--spacing-4));
}
.asideMiniWithReplyTo {
@@ -60,14 +60,14 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
We have reply to field, so we align below the fattest
element plus the reply to field.
*/
padding-top: calc(2 * var(--v2-font-size-2) + 5px + var(--v2-spacing-4));
padding-top: calc(2 * var(--font-size-2) + 5px + var(--spacing-4));
}
.decision {
color: $moderateCardDecisionColor;
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-bold);
font-family: var(--v2-font-family-primary);
font-size: var(--font-size-2);
font-weight: var(--font-weight-primary-bold);
font-family: var(--font-family-primary);
line-height: 1.14;
text-transform: uppercase;
}
@@ -75,13 +75,13 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
.separator {
position: absolute;
top: 0;
right: calc(-1 * var(--v2-spacing-5));
right: calc(-1 * var(--spacing-5));
bottom: 0;
width: 2px;
}
.ruledSeparator {
border-right: 1px solid var(--v2-colors-grey-400);
border-right: 1px solid var(--palette-grey-400);
}
.root {
@@ -93,53 +93,53 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
}
.dangling {
background-color: var(--v2-palette-grey-lightest);
background-color: var(--palette-grey-200);
box-shadow: none;
}
.link {
font-size: var(--v2-font-size-1);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-reset);
font-size: var(--font-size-1);
font-weight: var(--font-weight-primary-semi-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-3);
color: $moderateCardLinkTextColor;
text-transform: uppercase;
}
.viewContext {
padding-bottom: var(--v2-spacing-1);
padding-bottom: var(--spacing-1);
}
.storyLabel {
color: var(--v2-palette-grey-main);
font-size: var(--v2-font-size-1);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-reset);
margin-bottom: var(--v2-spacing-1);
color: var(--palette-grey-500);
font-size: var(--font-size-1);
font-weight: var(--font-weight-primary-semi-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-3);
margin-bottom: var(--spacing-1);
text-transform: uppercase;
}
.commentOn {
font-size: var(--v2-font-size-2);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-reset);
margin-bottom: var(--v2-spacing-1);
font-size: var(--font-size-2);
font-family: var(--font-family-primary);
line-height: var(--line-height-3);
margin-bottom: var(--spacing-1);
}
.siteName {
font-weight: var(--v2-font-weight-primary-regular);
font-weight: var(--font-weight-primary-regular);
}
.storyTitle {
font-weight: var(--font-weight-primary-semi-bold);
color: $moderateCardStoryTitleColor;
font-weight: var(--v2-font-weight-primary-semi-bold);
}
.borderless {
border-width: 0px;
box-shadow: none;
padding: var(--v2-spacing-2) 0;
padding: var(--spacing-2) 0;
}
.miniButton {
@@ -149,19 +149,19 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
.timestamp {
color: $moderateCardTimestampColor;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-1);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-1);
line-height: var(--line-height-3);
}
.edited {
color: $moderateCardEditedColor;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-1);
line-height: var(--v2-line-height-reset);
padding-left: var(--v2-spacing-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-1);
line-height: var(--line-height-3);
padding-left: var(--spacing-2);
}
.selected {
@@ -171,17 +171,17 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700);
.authorStatus {
padding-right: var(--spacing-2);
color: $moderateCardAuthorStatusColor;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-1);
line-height: var(--v2-line-height-reset);
padding-left: var(--v2-spacing-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-1);
line-height: var(--line-height-3);
padding-left: var(--spacing-2);
}
.deleted {
background: var(--v2-palette-grey-lightest);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-body-short);
background: var(--palette-grey-200);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
line-height: var(--line-height-4);
}
src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css
+1 -1
View File
@@ -1,4 +1,4 @@
.button {
text-transform: uppercase;
font-size: var(--v2-font-size-2);
font-size: var(--font-size-2);
}
src/core/client/admin/components/ModerateCard/ModeratedByContainer.css
+10 -10
View File
@@ -1,20 +1,20 @@
$moderated-by: var(--v2-colors-mono-100);
$moderated-by-username: var(--v2-colors-mono-900);
$moderated-by: var(--palette-text-100);
$moderated-by-username: var(--palette-text-900);
.moderatedBy {
font-size: var(--v2-font-size-1);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-reset);
font-size: var(--font-size-1);
font-weight: var(--font-weight-primary-semi-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-3);
color: $moderated-by;
text-transform: uppercase;
}
.moderatedByUsername {
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-secondary-bold);
font-family: var(--v2-font-family-secondary);
line-height: var(--v2-line-height-reset);
font-size: var(--font-size-2);
font-weight: var(--font-weight-secondary-bold);
font-family: var(--font-family-secondary);
line-height: var(--line-height-3);
color: $moderated-by-username;
text-align: center;
padding-top: 1px;
src/core/client/admin/components/ModerateCard/RejectButton.css
+16 -6
View File
@@ -1,9 +1,9 @@
$moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
$moderateCardButtonOutlineRejectColor: var(--palette-error-500);
.root {
border: 1px solid $moderateCardButtonOutlineRejectColor;
box-sizing: border-box;
border-radius: var(--v2-round-corners);
border-radius: var(--round-corners);
width: 65px;
height: 50px;
display: flex;
@@ -12,14 +12,24 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
color: $moderateCardButtonOutlineRejectColor;
&:not(:disabled):active {
background-color: $moderateCardButtonOutlineRejectColor;
color: var(--v2-colors-pure-white);
color: var(--palette-text-000);
}
}
.readOnly {
background-color: transparent;
border-color: var(--v2-colors-grey-300);
color: var(--v2-colors-grey-300);
border-color: $colors-grey-300);
color: $colors-grey-300);
&:hover {
cursor: not-allowed;
}
}
.readOnly {
background-color: transparent;
border-color: $colors-grey-300;
color: $colors-grey-300;
&:hover {
cursor: not-allowed;
@@ -28,8 +38,8 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
.invert {
background-color: $moderateCardButtonOutlineRejectColor;
color: var(--palette-text-000);
border-color: $moderateCardButtonOutlineRejectColor;
color: var(--v2-colors-pure-white);
}
.icon {
src/core/client/admin/components/ModerateCard/ToxicityLabel.css
+6 -6
View File
@@ -1,11 +1,11 @@
$moderateCardCounterBadgeBackgroundAlert: var(--v2-colors-red-500);
$moderateCardToxicityColor: var(--v2-colors-mono-500);
$moderateCardCounterBadgeBackgroundAlert: var(--palette-error-500);
$moderateCardToxicityColor: var(--palette-text-500);
.root {
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-body-short);
font-size: var(--font-size-2);
font-weight: var(--font-weight-primary-semi-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-4);
color: $moderateCardToxicityColor;
}
src/core/client/admin/components/NotAvailable.css
+1 -1
View File
@@ -1,4 +1,4 @@
$tableBodyDisabledColor: var(--v2-colors-mono-100);
$tableBodyDisabledColor: var(--palette-text-100);
.root {
color: $tableBodyDisabledColor;
src/core/client/admin/components/NotAvailable.tsx
+2
View File
@@ -3,6 +3,8 @@ import React, { FunctionComponent } from "react";
import styles from "./NotAvailable.css";
// TODO: (cvle) remove color styles from here. Color should be applied externally.
const NotAvailable: FunctionComponent = (props) => (
<Localized id="general-notAvailable">
<span className={styles.root}>Not available</span>
src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css
+6 -6
View File
@@ -1,5 +1,5 @@
.root {
margin-top: var(--v2-spacing-2);
margin-top: var(--spacing-2);
}
.dropdown {
@@ -15,18 +15,18 @@
}
.button {
color: var(--v2-colors-mono-500) !important;
color: var(--palette-text-500) !important;
border-width: 0;
width: calc(20 * var(--mini-unit));
margin-right: calc(var(--v2-spacing-1) / 2);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-min);
margin-right: calc(var(--spacing-1) / 2);
font-size: var(--font-size-3);
line-height: var(--line-height-min);
justify-content: space-between;
}
.buttonIconLeft {
width: 20px;
margin-right: calc(var(--v2-spacing-1) / 2);
margin-right: calc(var(--spacing-1) / 2);
}
.buttonIconRight {
src/core/client/admin/components/Timeline/Circle.css
+2 -2
View File
@@ -9,11 +9,11 @@
}
.colorReg {
color: var(--v2-colors-grey-500);
color: var(--palette-grey-500);
}
.colorLight {
color: var(--v2-colors-grey-400);
color: var(--palette-grey-400);
}
.root {
src/core/client/admin/components/Timeline/Line.css
+2 -2
View File
@@ -1,6 +1,6 @@
.root {
border-left: 1px solid var(--palette-grey-main);
border-right: 1px solid var(--palette-grey-main);
border-left: 1px solid var(--palette-grey-500);
border-right: 1px solid var(--palette-grey-500);
flex: 1;
}
src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css
+22 -22
View File
@@ -1,33 +1,33 @@
$moderator-note-bg: var(--v2-colors-grey-100);
$moderator-note-body: var(--v2-colors-mono-500);
$moderator-note-dot: var(--v2-colors-mono-100);
$moderator-note-username: var(--v2-colors-mono-900);
$moderator-note-bg: var(--palette-grey-100);
$moderator-note-body: var(--palette-text-500);
$moderator-note-dot: var(--palette-text-100);
$moderator-note-username: var(--palette-text-900);
.root {
}
.body {
font-family: var(--v2-font-family-primary);
font-size: var(--v2-font-size-3);
font-weight: var(--v2-font-weight-primary-regular);
line-height: var(--v2-line-height-body-short);
font-family: var(--font-family-primary);
font-size: var(--font-size-3);
font-weight: var(--font-weight-primary-regular);
line-height: var(--line-height-field-description);
background-color: $moderator-note-bg;
border-radius: 4px;
padding: var(--v2-spacing-3);
padding: var(--spacing-3);
color: $moderator-note-body;
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.bodyType {
}
.leftBy {
font-family: var(--v2-font-family-primary);
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-regular);
line-height: var(--v2-line-height-reset);
padding-left: var(--v2-spacing-4);
padding-right: var(--v2-spacing-1);
font-family: var(--font-family-primary);
font-size: var(--font-size-2);
font-weight: var(--font-weight-primary-regular);
line-height: var(--line-height-3);
padding-left: var(--spacing-4);
padding-right: var(--spacing-1);
position: relative;
color: $moderator-note-body;
}
@@ -39,19 +39,19 @@ $moderator-note-username: var(--v2-colors-mono-900);
background-color: ;
position: absolute;
border-radius: 50%;
left: var(--v2-spacing-1);
left: var(--spacing-1);
background-color: $moderator-note-dot;
top: 50%;
}
.username {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
line-height: var(--v2-line-height-reset);
font-size: var(--v2-font-size-3);
font-family: var(--font-family-secondary);
font-weight: var(--font-weight-secondary-bold);
line-height: var(--line-height-3);
font-size: var(--font-size-3);
color: $moderator-note-username;
}
.footerLeft {
padding-left: var(--v2-spacing-3);
padding-left: var(--spacing-3);
}
src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css
+20 -20
View File
@@ -1,44 +1,44 @@
$recent-history-title: var(--v2-colors-mono-500);
$recent-history-subtitle: var(--v2-colors-mono-100);
$recent-history-info: var(--v2-colors-mono-500);
$recent-history-triggered: var(--v2-palette-error-main);
$recent-history-title: var(--palette-text-500);
$recent-history-subtitle: var(--palette-text-100);
$recent-history-info: var(--palette-text-500);
$recent-history-triggered: var(--palette-error-500);
.title {
text-transform: uppercase;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-3);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-bold);
font-size: var(--font-size-3);
margin: 0;
line-height: var(--v2-line-height-body-short);
line-height: var(--line-height-field-description);
color: $recent-history-title;
}
.subTitle {
color: $recent-history-subtitle;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
margin: 0;
line-height: var(--v2-line-height-body-short);
line-height: var(--line-height-4);
}
.info {
}
.amount {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-reset);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
font-size: var(--font-size-6);
line-height: var(--line-height-3);
line-height: var(--line-height-3);
color: $recent-history-info;
margin: 0;
}
.amountLabel {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--v2-font-size-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
font-size: var(--font-size-2);
color: $recent-history-info;
margin: 0;
}
src/core/client/admin/components/UserHistoryDrawer/Tabs.css
+5 -5
View File
@@ -1,4 +1,4 @@
$indicator-dot: var(--v2-colors-blue-400);
$indicator-dot: $colors-teal-500;
.root {
height: 100%;
@@ -23,7 +23,7 @@ $indicator-dot: var(--v2-colors-blue-400);
}
.tabIcon {
margin-right: var(--v2-spacing-1);
margin-right: var(--spacing-1);
}
.tabContent {
@@ -32,7 +32,7 @@ $indicator-dot: var(--v2-colors-blue-400);
}
.container {
height: calc(100% - var(--v2-spacing-2) - var(--v2-spacing-3));
height: calc(100% - var(--spacing-2) - var(--spacing-3));
display: flex;
flex-direction: column;
@@ -41,8 +41,8 @@ $indicator-dot: var(--v2-colors-blue-400);
overflow: hidden;
margin-bottom: var(--v2-spacing-2);
margin-top: var(--v2-spacing-3);
margin-bottom: var(--spacing-2);
margin-top: var(--spacing-3);
}
.scrollable {
src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.css
+1 -1
View File
@@ -1,7 +1,7 @@
.tableHeader {
border-width: 0px;
border-style: none;
background-color: var(--palette-grey-lightest);
background-color: var(--palette-grey-200);
}
.row:first-child:hover {
src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css
+1 -1
View File
@@ -4,7 +4,7 @@
.callout {
width: 100%;
font-family: var(--v2-font-family-primary);
font-family: var(--font-family-primary);
align-content: center;
text-align: center;
}
src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css
+3 -3
View File
@@ -3,7 +3,7 @@
.textArea {
width: 100%;
margin-bottom: var(--v2-spacing-2);
margin-bottom: var(--spacing-2);
}
.textArea:focus {
@@ -11,6 +11,6 @@
}
.form {
padding: var(--v2-spacing-2) 0;
margin-bottom: var(--v2-spacing-4);
padding: var(--spacing-2) 0;
margin-bottom: var(--spacing-4);
}
src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.css
+3 -3
View File
@@ -1,5 +1,5 @@
.root {
}
.spinner {
@@ -8,7 +8,7 @@
.callout {
width: 100%;
font-family: var(--font-family-sans-serif);
font-family: var(--font-family-primary);
align-content: center;
text-align: center;
}
}
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css
+1 -1
View File
@@ -1,4 +1,4 @@
$user-drawer-background: var(--v2-colors-pure-white);
$user-drawer-background: $colors-pure-white;
.root {
position: fixed;
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import React, { FunctionComponent } from "react";
import { Modal } from "coral-ui/components";
import { Card } from "coral-ui/components/v2";
import { Card, Modal } from "coral-ui/components/v2";
import UserHistoryDrawerQuery from "./UserHistoryDrawerQuery";
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.css
+2 -2
View File
@@ -4,11 +4,11 @@
.loadMore {
width: 100%;
background-color: var(--palette-common-white);
background-color: $colors-pure-white;
border-width: 1px;
border-style: solid;
border-color: var(--palette-grey-lighter);
border-color: var(--palette-grey-300);
border-radius: var(--round-corners);
margin-top: var(--spacing-1);
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.css
+2 -2
View File
@@ -4,7 +4,7 @@
.callout {
width: 100%;
font-family: var(--font-family-sans-serif);
font-family: var(--font-family-primary);
align-content: center;
text-align: center;
}
}
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css
+17 -17
View File
@@ -1,7 +1,7 @@
$user-drawer-background: var(--v2-colors-pure-white);
$user-drawer-account-info: var(--v2-colors-mono-500);
$user-drawer-divider: var(--v2-colors-grey-300);
$user-drawer-status-label: var(--v2-colors-mono-500);
$user-drawer-background: $colors-pure-white;
$user-drawer-account-info: var(--palette-text-500);
$user-drawer-divider: var(--palette-grey-300);
$user-drawer-status-label: var(--palette-text-500);
.comments {
flex: auto;
@@ -26,20 +26,20 @@ $user-drawer-status-label: var(--v2-colors-mono-500);
}
.username {
font-family: var(--v2-font-family-secondary);
font-weight: var(--v2-font-weight-secondary-bold);
font-size: var(--v2-font-size-6);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-secondary);
font-weight: var(--font-weight-secondary-bold);
font-size: var(--font-size-6);
line-height: var(--line-height-3);
}
.userDetail {
}
.userDetailValue {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-3);
line-height: var(--line-height-3);
color: $user-drawer-account-info;
}
@@ -58,12 +58,12 @@ $user-drawer-status-label: var(--v2-colors-mono-500);
}
.userStatusLabel {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-bold);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
color: $user-drawer-status-label;
margin-right: var(--v2-spacing-1);
margin-right: var(--spacing-1);
}
.userStatusChange {
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css
+1 -1
View File
@@ -1,6 +1,6 @@
.root {
width: 100%;
font-family: var(--font-family-sans-serif);
font-family: var(--font-family-primary);
align-content: center;
text-align: center;
}
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.css
+2 -2
View File
@@ -4,11 +4,11 @@
.loadMore {
width: 100%;
background-color: var(--palette-common-white);
background-color: $colors-pure-white;
border-width: 1px;
border-style: solid;
border-color: var(--palette-grey-lighter);
border-color: var(--palette-grey-300);
border-radius: var(--round-corners);
margin-top: var(--spacing-1);
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.css
+2 -2
View File
@@ -4,7 +4,7 @@
.callout {
width: 100%;
font-family: var(--font-family-sans-serif);
font-family: var(--font-family-primary);
align-content: center;
text-align: center;
}
}
src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css
+7 -7
View File
@@ -1,14 +1,14 @@
$user-status-details: var(--v2-colors-mono-500);
$user-status-details: var(--palette-text-500);
.root {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-2);
color: $user-status-details;
line-height: var(--v2-line-height-body-short);
margin: 0 0 var(--v2-spacing-1) 0;
line-height: var(--line-height-4);
margin: 0 0 var(--spacing-1) 0;
}
.root strong {
font-weight: var(--v2-font-weight-primary-bold);
font-weight: var(--font-weight-primary-bold);
}
src/core/client/admin/components/UserHistoryDrawer/UsernameChangeAction.css
+2 -2
View File
@@ -1,7 +1,7 @@
.tableLight {
font-weight: var(--font-weight-regular);
font-weight: var(--font-weight-primary-regular);
}
.usernameCell {
line-height: calc(18em / 14);
}
}
src/core/client/admin/components/UserRole/SiteModeratorModal.css
+2 -2
View File
@@ -1,5 +1,5 @@
.root {
max-width: 500px;
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
var(--v2-spacing-3);
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3)
var(--spacing-3);
}
src/core/client/admin/components/UserRole/UserRoleText.css
+4 -4
View File
@@ -1,12 +1,12 @@
$tableBodyTextColor: var(--v2-colors-mono-500);
$tableBodyTextColor: var(--palette-text-500);
.root {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
color: $tableBodyTextColor;
}
.commenter {
color: $tableBodyTextColor;
font-weight: var(--v2-font-weight-primary-regular);
font-weight: var(--font-weight-primary-regular);
}
src/core/client/admin/components/UserStatus/BanModal.css
+5 -5
View File
@@ -1,10 +1,10 @@
$ban-modal-text: var(--v2-colors-mono-500);
$ban-modal-text: var(--palette-text-500);
.bodyText {
font-size: var(--v2-font-size-3);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
line-height: var(--v2-line-height-body-short);
font-size: var(--font-size-3);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
line-height: var(--line-height-field-description);
color: $ban-modal-text;
}
src/core/client/admin/components/UserStatus/ChangeStatusModal.css
+2 -2
View File
@@ -1,5 +1,5 @@
.root {
max-width: 500px;
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
var(--v2-spacing-3);
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3)
var(--spacing-3);
}
src/core/client/admin/components/UserStatus/SuspendForm.css
+11
View File
@@ -1,3 +1,5 @@
$suspend-modal-text: var(--palette-text-500);
.radioButton {
margin: 0 var(--spacing-1) 0 0 !important;
}
@@ -13,6 +15,15 @@
margin: 0 0 var(--spacing-3) 0 !important;
}
.subTitle {
font-size: var(--font-size-4);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
line-height: var(--line-height-5);
color: $suspend-modal-text;
margin: 0;
}
.footer {
margin-top: var(--spacing-3);
}
src/core/client/admin/components/UserStatus/SuspendModal.css
+37
View File
@@ -0,0 +1,37 @@
$suspend-modal-text: var(--palette-text-500);
.bodyText {
font-size: var(--font-size-3);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
line-height: var(--line-height-field-description);
color: $suspend-modal-text;
}
.subTitle {
font-size: var(--font-size-4);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
line-height: var(--line-height-5);
color: $suspend-modal-text;
margin: 0;
}
.radioButton {
margin: 0 var(--spacing-1) 0 0 !important;
}
.textArea {
width: 100%;
box-sizing: border-box;
height: calc(12 * var(--mini-unit));
padding: calc(0.5 * var(--mini-unit));
}
.header {
margin: 0 0 var(--spacing-3) 0 !important;
}
.footer {
margin-top: var(--spacing-3);
}
src/core/client/admin/components/UserStatus/UserStatus.css
+9 -9
View File
@@ -1,20 +1,20 @@
.root {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--v2-font-size-2);
line-height: var(--v2-line-height-reset);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
}
.success {
color: var(--v2-palette-success-main);
color: var(--palette-success-500);
}
.warning {
color: var(--v2-palette-error-main);
font-weight: var(--v2-font-weight-primary-semi-bold);
color: var(--palette-error-500);
font-weight: var(--font-weight-primary-semi-bold);
}
.error {
color: var(--v2-palette-error-darkest);
font-weight: var(--v2-font-weight-primary-semi-bold);
color: var(--palette-error-700);
font-weight: var(--font-weight-primary-semi-bold);
}
src/core/client/admin/components/UserStatus/UserStatusChange.css
+2 -2
View File
@@ -1,4 +1,4 @@
$status-change-button-border: var(--v2-colors-grey-400);
$status-change-button-border: var(--palette-grey-400);
.button {
justify-content: space-between;
@@ -6,7 +6,7 @@ $status-change-button-border: var(--v2-colors-grey-400);
}
.bordered {
padding: 0 var(--v2-spacing-2);
padding: 0 var(--spacing-2);
border: 1px solid $status-change-button-border;
}
src/core/client/admin/index.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { initLocalState } from "./local";
import localesData from "./locales";
// Import css variables.
import "coral-ui/theme/variables.css";
import "coral-ui/theme/admin.css";
async function main() {
await injectConditionalPolyfills();
src/core/client/admin/routes/AuthCheck/NetworkError.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { Message } from "coral-ui/components";
import { Message } from "coral-ui/components/v2";
import styles from "./NetworkError.css";
src/core/client/admin/routes/AuthCheck/Restricted.css
+26 -26
View File
@@ -1,52 +1,52 @@
.title {
font-weight: var(--v2-font-weight-secondary-bold);
font-family: var(--v2-font-family-secondary);
color: var(--v2-colors-mono-100);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-title);
font-weight: var(--font-weight-secondary-bold);
font-family: var(--font-family-secondary);
color: var(--palette-text-100);
font-size: var(--font-size-3);
line-height: var(--line-height-4);
padding-bottom: var(--v2-spacing-3);
padding-bottom: var(--spacing-3);
}
.username {
font-size: var(--v2-font-size-6);
font-weight: var(--v2-font-weight-secondary-bold);
font-family: var(--v2-font-family-secondary);
line-height: var(--v2-line-height-reset);
color: var(--v2-colors-mono-900);
font-size: var(--font-size-6);
font-weight: var(--font-weight-secondary-bold);
font-family: var(--font-family-secondary);
line-height: var(--line-height-7);
color: var(--palette-text-900);
text-align: center;
padding-bottom: var(--v2-spacing-5);
padding-bottom: var(--spacing-5);
}
.copy {
font-size: var(--v2-font-size-3);
font-weight: var(--v2-font-weight-primary-regular);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-reset);
color: var(--v2-colors-mono-500);
font-size: var(--font-size-3);
font-weight: var(--font-weight-primary-regular);
font-family: var(--font-family-primary);
line-height: var(--line-height-4);
color: var(--palette-text-500);
text-align: center;
}
.lockIcon {
color: var(--v2-colors-mono-900);
padding-bottom: var(--v2-spacing-2);
color: var(--palette-text-900);
padding-bottom: var(--spacing-2);
}
.noPermission {
font-size: var(--v2-font-size-4);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-reset);
color: var(--v2-colors-mono-900);
font-size: var(--font-size-4);
font-weight: var(--font-weight-primary-semi-bold);
font-family: var(--font-family-primary);
line-height: var(--line-height-3);
color: var(--palette-text-900);
text-align: center;
padding-bottom: var(--v2-spacing-5);
padding-bottom: var(--spacing-5);
}
.contactAdmin {
padding-top: var(--v2-spacing-3);
padding-top: var(--spacing-3);
}
src/core/client/admin/routes/Community/EmptyMessage.css
+4 -4
View File
@@ -1,7 +1,7 @@
.root {
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
line-height: var(--v2-line-height-body-short);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
font-size: var(--font-size-3);
line-height: var(--line-height-field-description);
text-align: center;
}
src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css
+1 -1
View File
@@ -1,3 +1,3 @@
.button {
padding: var(--v2-spacing-2);
padding: var(--spacing-2);
}
src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css
+5 -5
View File
@@ -1,9 +1,9 @@
$invite-form-text: var(--v2-colors-mono-500);
$invite-form-text: var(--palette-text-500);
.bodyText {
font-size: var(--v2-font-size-3);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-regular);
line-height: var(--v2-line-height-body-short);
font-size: var(--font-size-3);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-regular);
line-height: var(--line-height-field-description);
color: $invite-form-text;
}
src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css
+7 -7
View File
@@ -1,16 +1,16 @@
$invite-modal-text: var(--v2-colors-mono-500);
$invite-modal-text: var(--palette-text-500);
.root {
width: 400px;
padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
var(--v2-spacing-3);
padding: var(--spacing-2) var(--spacing-3) var(--spacing-3)
var(--spacing-3);
}
.title {
font-size: var(--v2-font-size-5);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
line-height: var(--v2-line-height-title);
font-size: var(--font-size-5);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
line-height: var(--line-height-6);
color: $invite-modal-text;
margin: 0;
}
src/core/client/admin/routes/Community/InviteUsers/RoleField.css
+9
View File
@@ -0,0 +1,9 @@
$role-field-text: var(--palette-text-500);
.legend {
font-size: var(--font-size-3);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
line-height: var(--line-height-field-description);
color: $role-field-text;
}
src/core/client/admin/routes/Community/InviteUsers/Success.css
+5 -5
View File
@@ -1,13 +1,13 @@
$success-text: var(--v2-colors-mono-500);
$success-text: var(--palette-text-500);
.box {
width: 100%;
}
.title {
font-size: var(--v2-font-size-5);
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
line-height: var(--v2-line-height-title);
font-size: var(--font-size-5);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-primary-semi-bold);
line-height: var(--line-height-6);
color: $success-text;
margin: 0;
}
src/core/client/admin/routes/Community/InviteUsers/Success.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import { Box, Button, CheckIcon, Flex } from "coral-ui/components";
import { Box, Button, CheckIcon, Flex } from "coral-ui/components/v2";
import * as styles from "./Success.css";
@@ -30,8 +30,8 @@ const Success: FunctionComponent<Props> = ({ lastFocusableRef, onClose }) => (
</Flex>
<Localized id="community-invite-close">
<Button
variant="filled"
color="primary"
variant="regular"
color="regular"
onClick={onClose}
ref={lastFocusableRef}
>

Some files were not shown because too many files have changed in this diff Show More