Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Switching to system fonts (#344)

Browse Source 
* Switching to system fonts

* Fixed text alignment issue in text component.

* Changing font of ads components.

* Adding a font type

* Removing unused fonts

* Making fonts in theme an object.

* Removing unncessary font declerations

* Fixing storybook

* Reverting background remove
This commit is contained in:
satbir121 2020-08-19 03:21:23 +05:30 committed by GitHub
parent 6776f6a251
commit 901932f9d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 30 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/.storybook/config.js
View File

@ -2,6 +2,8 @@ import { configure, addDecorator, addParameters } from "@storybook/react";
import { withContexts } from "@storybook/addon-contexts/react"; import { withContexts } from "@storybook/addon-contexts/react";
import { contexts } from "./configs/contexts"; import { contexts } from "./configs/contexts";
import { } from '@storybook/react'; // <- or your storybook framework import { } from '@storybook/react'; // <- or your storybook framework
import "../src/index.css";
addDecorator(withContexts(contexts)); addDecorator(withContexts(contexts));
addParameters({ addParameters({

2
app/client/package.json
View File

@ -19,7 +19,6 @@
"@sentry/browser": "^5.6.3", "@sentry/browser": "^5.6.3",
"@sentry/webpack-plugin": "^1.10.0", "@sentry/webpack-plugin": "^1.10.0",
"@types/chance": "^1.0.7", "@types/chance": "^1.0.7",
"@types/fontfaceobserver": "^0.0.6",
"@types/lodash": "^4.14.120", "@types/lodash": "^4.14.120",
"@types/moment-timezone": "^0.5.10", "@types/moment-timezone": "^0.5.10",
"@types/nanoid": "^2.0.0", "@types/nanoid": "^2.0.0",
@ -52,7 +51,6 @@
"eslint": "^6.4.0", "eslint": "^6.4.0",
"fast-deep-equal": "^3.1.1", "fast-deep-equal": "^3.1.1",
"flow-bin": "^0.91.0", "flow-bin": "^0.91.0",
"fontfaceobserver": "^2.1.0",
"fuse.js": "^3.4.5", "fuse.js": "^3.4.5",
"fusioncharts": "^3.15.0-sr.1", "fusioncharts": "^3.15.0-sr.1",
"history": "^4.10.1", "history": "^4.10.1",

11
app/client/public/index.html
View File

@ -4,7 +4,6 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet" />
<title>Appsmith</title> <title>Appsmith</title>
<style> <style>
#loader { #loader {
@ -20,15 +19,15 @@
// INTERCOM SETUP // INTERCOM SETUP
const APP_ID = "%REACT_APP_INTERCOM_APP_ID%" const APP_ID = "%REACT_APP_INTERCOM_APP_ID%"
const CLOUD_HOSTING = "%REACT_APP_CLOUD_HOSTING%" const CLOUD_HOSTING = "%REACT_APP_CLOUD_HOSTING%"
if(APP_ID.length && CLOUD_HOSTING.length) { if (APP_ID.length && CLOUD_HOSTING.length) {
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})(); (function () { var w = window; var ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', w.intercomSettings); } else { var d = document; var i = function () { i.c(arguments); }; i.q = []; i.c = function (args) { i.q.push(args); }; w.Intercom = i; var l = function () { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/' + APP_ID; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); }; if (document.readyState === 'complete') { l(); } else if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })();
} }
</script> </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"></script>
<script> <script>
// GA SETUP // GA SETUP
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', "%REACT_APP_GOOGLE_ANALYTICS_ID%"); gtag('config', "%REACT_APP_GOOGLE_ANALYTICS_ID%");
@ -62,7 +61,7 @@
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
const parseConfig = (config) => { const parseConfig = (config) => {
if(config.indexOf("__") === 0 || config.indexOf("$") === 0) if (config.indexOf("__") === 0 || config.indexOf("$") === 0)
return ""; return "";
return config.trim(); return config.trim();
} }
@ -98,7 +97,7 @@
id: parseConfig("__APPSMITH_VERSION_ID__"), id: parseConfig("__APPSMITH_VERSION_ID__"),
releaseDate: parseConfig("__APPSMITH_VERSION_RELEASE_DATE__") releaseDate: parseConfig("__APPSMITH_VERSION_RELEASE_DATE__")
}, },
intercomAppID: parseConfig("__APPSMITH_INTERCOM_APP_ID__"), intercomAppID: parseConfig("__APPSMITH_INTERCOM_APP_ID__"),
}; };
</script> </script>
<script rel="prefetch" type="text/javascript" src="/shims/realms-shim.umd.min.js"></script> <script rel="prefetch" type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>

1
app/client/src/components/ads/Button.tsx
View File

@ -248,7 +248,6 @@ const StyledButton = styled("button")<ThemeProp & ButtonProps>`
color: ${props => btnColorStyles(props, "main").txtColor}; color: ${props => btnColorStyles(props, "main").txtColor};
border: ${props => btnColorStyles(props, "main").border}; border: ${props => btnColorStyles(props, "main").border};
border-radius: ${props => props.theme.radii[0]}; border-radius: ${props => props.theme.radii[0]};
font-family: ${props => props.theme.fonts[2]};
${props => btnFontStyles(props).buttonFont}; ${props => btnFontStyles(props).buttonFont};
padding: ${props => btnFontStyles(props).padding}; padding: ${props => btnFontStyles(props).padding};
.ads-icon { .ads-icon {

2
app/client/src/components/ads/Table.tsx
View File

@ -24,7 +24,6 @@ const Styles = styled.div`
font-size: ${props => props.theme.typography.h6.fontSize}px; font-size: ${props => props.theme.typography.h6.fontSize}px;
line-height: ${props => props.theme.typography.h6.lineHeight}px; line-height: ${props => props.theme.typography.h6.lineHeight}px;
letter-spacing: ${props => props.theme.typography.h6.letterSpacing}px; letter-spacing: ${props => props.theme.typography.h6.letterSpacing}px;
font-family: ${props => props.theme.fonts[2]};
svg { svg {
margin-left: ${props => props.theme.spaces[2]}px; margin-left: ${props => props.theme.spaces[2]}px;
@ -59,7 +58,6 @@ const Styles = styled.div`
line-height: ${props => props.theme.typography.p1.lineHeight}px; line-height: ${props => props.theme.typography.p1.lineHeight}px;
letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px; letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
font-weight: normal; font-weight: normal;
font-family: ${props => props.theme.fonts[2]};
border-bottom: 1px solid ${props => props.theme.colors.blackShades[3]}; border-bottom: 1px solid ${props => props.theme.colors.blackShades[3]};
} }

1
app/client/src/components/ads/Tabs.tsx
View File

@ -6,7 +6,6 @@ import { Icon, IconName } from "./Icon";
import { Size } from "./Button"; import { Size } from "./Button";
const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>` const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
font-family: ${props => props.theme.fonts[2]};
user-select: none; user-select: none;
border-radius: 0px; border-radius: 0px;
height: 100%; height: 100%;

1
app/client/src/components/ads/Text.tsx
View File

@ -41,7 +41,6 @@ const typeSelector = (props: TextProps & ThemeProp): string => {
const Text = styled.span<TextProps>` const Text = styled.span<TextProps>`
text-decoration: ${props => (props.underline ? "underline" : "unset")}; text-decoration: ${props => (props.underline ? "underline" : "unset")};
font-style: ${props => (props.italic ? "italic" : "normal")}; font-style: ${props => (props.italic ? "italic" : "normal")};
font-family: ${props => props.theme.fonts[2]};
font-weight: ${props => props.theme.typography[props.type].fontWeight}; font-weight: ${props => props.theme.typography[props.type].fontWeight};
font-size: ${props => props.theme.typography[props.type].fontSize}px; font-size: ${props => props.theme.typography[props.type].fontSize}px;
line-height: ${props => props.theme.typography[props.type].lineHeight}px; line-height: ${props => props.theme.typography[props.type].lineHeight}px;

3
app/client/src/components/ads/TextInput.tsx
View File

@ -1,8 +1,8 @@
import React, { forwardRef, Ref, useCallback, useMemo, useState } from "react"; import React, { forwardRef, Ref, useCallback, useMemo, useState } from "react";
import { CommonComponentProps, hexToRgba } from "./common"; import { CommonComponentProps, hexToRgba } from "./common";
import styled from "styled-components"; import styled from "styled-components";
import { theme } from "../../constants/DefaultTheme";
import Text, { TextType } from "./Text"; import Text, { TextType } from "./Text";
import { theme } from "constants/DefaultTheme";
export type TextInputProps = CommonComponentProps & { export type TextInputProps = CommonComponentProps & {
placeholder?: string; placeholder?: string;
@ -45,7 +45,6 @@ const StyledInput = styled.input<
box-shadow: none; box-shadow: none;
margin-bottom: ${props => props.theme.spaces[1]}px; margin-bottom: ${props => props.theme.spaces[1]}px;
border: 1px solid ${props => props.inputStyle.borderColor}; border: 1px solid ${props => props.inputStyle.borderColor};
font-family: ${props => props.theme.fonts[3]};
padding: ${props => props.theme.spaces[4]}px padding: ${props => props.theme.spaces[4]}px
${props => props.theme.spaces[6]}px; ${props => props.theme.spaces[6]}px;
background-color: ${props => props.inputStyle.bgColor}; background-color: ${props => props.inputStyle.bgColor};

2
app/client/src/components/designSystems/blueprint/TextComponent.tsx
View File

@ -33,7 +33,7 @@ export const StyledText = styled(Text)<{
height: 100%; height: 100%;
overflow-y: ${props => (props.scroll ? "auto" : "hidden")}; overflow-y: ${props => (props.scroll ? "auto" : "hidden")};
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: ${props => props.textAlign.toLowerCase()} text-align: ${props => props.textAlign.toLowerCase()};
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;

2
app/client/src/components/editorComponents/ApiResponseView.tsx
View File

@ -113,7 +113,7 @@ const FailedMessageContainer = styled.div`
padding-top: 10px; padding-top: 10px;
padding-bottom: 7px; padding-bottom: 7px;
padding-left: 15px; padding-left: 15px;
font-family: DM Sans; font-family: ${props => props.theme.fonts.text};
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;

4
app/client/src/components/editorComponents/HighlightedCode/themes.ts
View File

@ -6,7 +6,7 @@ export const LIGHT = css`
color: black; color: black;
background: none; background: none;
text-shadow: 0 1px white; text-shadow: 0 1px white;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: ${props => props.theme.fonts.code};
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
@ -144,7 +144,7 @@ export const DARK = css`
pre[class*="language-"] { pre[class*="language-"] {
color: white; color: white;
background: none; background: none;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: ${props => props.theme.fonts.code};
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
text-shadow: 0 -0.1em 0.2em black; text-shadow: 0 -0.1em 0.2em black;

4
app/client/src/components/editorComponents/RequestView.tsx
View File

@ -4,7 +4,7 @@ import styled from "styled-components";
import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor"; import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor";
const StyledKey = styled.span` const StyledKey = styled.span`
font-family: DM Sans; font-family: ${props => props.theme.fonts.text};
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
@ -32,7 +32,7 @@ const KeyValuePair = function(props: { hKey: string; hValue: string }) {
}; };
const StyledTreeContainer = styled.div` const StyledTreeContainer = styled.div`
font-family: DM Sans; font-family: ${props => props.theme.fonts.text};
.bp3-tree-node-content { .bp3-tree-node-content {
height: auto; height: auto;
} }

14
app/client/src/constants/DefaultTheme.tsx
View File

@ -269,7 +269,10 @@ export type Theme = {
colors: any; colors: any;
typography: any; typography: any;
lineHeights: Array<number>; lineHeights: Array<number>;
fonts: Array<FontFamily>; fonts: {
code: FontFamily;
text: FontFamily;
};
borders: ThemeBorder[]; borders: ThemeBorder[];
evaluatedValuePopup: { evaluatedValuePopup: {
width: number; width: number;
@ -603,11 +606,10 @@ export const theme: Theme = {
lightningborder: Colors.ALABASTER, lightningborder: Colors.ALABASTER,
}, },
lineHeights: [0, 14, 16, 18, 22, 24, 28, 36, 48, 64, 80], lineHeights: [0, 14, 16, 18, 22, 24, 28, 36, 48, 64, 80],
fonts: [ fonts: {
FontFamilies.DMSans, text: FontFamilies.TextFonts,
FontFamilies.FiraCode, code: FontFamilies.CodeFonts,
FontFamilies.HomePageRedesign, },
],
borders: [ borders: [
{ {
thickness: 1, thickness: 1,

8
app/client/src/constants/Fonts.tsx
View File

@ -1,4 +1,4 @@
export const DMSans = "DM Sans"; export const TextFonts =
export const FiraCode = '"Fira code", "Fira Mono", monospace'; "-apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif";
export const HomePageRedesign = export const CodeFonts =
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'; 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace';

6
app/client/src/index.css
View File

@ -6,8 +6,6 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background: #efefef; background: #efefef;
@ -17,10 +15,6 @@ body.dragging *{
cursor: grabbing !important; cursor: grabbing !important;
} }
body.fontLoaded {
font-family: "DM Sans", sans-serif;
}
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;

2
app/client/src/pages/Editor/APIEditor/Pagination.tsx
View File

@ -19,7 +19,7 @@ const PaginationFieldWrapper = styled.div`
const ExampleApi = styled.p` const ExampleApi = styled.p`
color: #ef7b63; color: #ef7b63;
font-family: monospace; font-family: ${props => props.theme.fonts.code};
`; `;
const StyledLabel = styled.label` const StyledLabel = styled.label`

2
app/client/src/pages/Editor/WidgetCard.tsx
View File

@ -46,7 +46,7 @@ export const Wrapper = styled.div`
} }
} }
& i { & i {
font-family: ${props => props.theme.fonts[2]}; font-family: ${props => props.theme.fonts.text};
font-size: ${props => props.theme.fontSizes[7]}px; font-size: ${props => props.theme.fontSizes[7]}px;
} }
`; `;

11
app/client/src/utils/AppsmithUtils.tsx
View File

@ -2,7 +2,6 @@ import { ReduxAction } from "constants/ReduxActionConstants";
import { getAppsmithConfigs } from "configs"; import { getAppsmithConfigs } from "configs";
import * as Sentry from "@sentry/browser"; import * as Sentry from "@sentry/browser";
import AnalyticsUtil from "./AnalyticsUtil"; import AnalyticsUtil from "./AnalyticsUtil";
import FontFaceObserver from "fontfaceobserver";
import FormControlRegistry from "./FormControlRegistry"; import FormControlRegistry from "./FormControlRegistry";
import { Property } from "api/ActionAPI"; import { Property } from "api/ActionAPI";
import _ from "lodash"; import _ from "lodash";
@ -42,16 +41,6 @@ export const appInitializer = () => {
} }
log.setLevel(getEnvLogLevel(appsmithConfigs.logLevel)); log.setLevel(getEnvLogLevel(appsmithConfigs.logLevel));
const textFont = new FontFaceObserver("DM Sans");
textFont
.load()
.then(() => {
document.body.className += "fontLoaded";
})
.catch(err => {
console.log(err);
});
}; };
export const mapToPropList = (map: Record<string, string>): Property[] => { export const mapToPropList = (map: Record<string, string>): Property[] => {