mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

use classnames, remove css

Browse source
This commit is contained in:
femyeda 2021-08-13 13:18:14 -05:00
parent da98a1ff1d
commit b46cf39ef2
13 changed files with 14 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/ui/Text/Body/Body.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Body: React.FunctionComponent<TextProps> = (props: TextProps) => { const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--body"], props?.className, props?.color); const classes = classnames("text-lg leading-relaxed text-gray-900 dark:text-white");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

3
components/ui/Text/Caption/Caption.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Caption: React.FunctionComponent<TextProps> = (props: TextProps) => { const Caption: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--caption"], props?.className, props?.color); const classes = classnames("text-sm text-gray-500 dark:text-white leading-tight");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

3
components/ui/Text/Caption2/Caption2.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Caption2: React.FunctionComponent<TextProps> = (props: TextProps) => { const Caption2: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--caption2"], props?.className, props?.color); const classes = classnames("text-xs italic text-gray-500 dark:text-white leading-tight");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

2
components/ui/Text/Footnote/Footnote.tsx
View file

@ -3,7 +3,7 @@ import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
const Footnote: React.FunctionComponent<TextProps> = (props: TextProps) => { const Footnote: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text--footnote", props?.className, props?.color); const classes = classnames("text-base font-normal text-gray-900 dark:text-white");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

3
components/ui/Text/Headline/Headline.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => { const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--headline"], props?.className, props?.color); const classes = classnames("text-xl font-bold text-gray-900 dark:text-white");
return <h1 className={classes}>{props.children}</h1>; return <h1 className={classes}>{props.children}</h1>;
}; };

3
components/ui/Text/Largetitle/Largetitle.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => { const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--largetitle"], props?.className, props?.color); const classes = classnames("text-2xl font-normal text-gray-900 dark:text-white");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

5
components/ui/Text/Overline/Overline.tsx
View file

@ -1,10 +1,11 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => { const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--overline"], props?.className, props?.color); const classes = classnames(
"text-sm uppercase font-semibold leading-snug tracking-wide text-gray-900 dark:text-white"
);
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

3
components/ui/Text/Subheadline/Subheadline.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Subheadline: React.FunctionComponent<TextProps> = (props: TextProps) => { const Subheadline: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--subheadline"], props?.className, props?.color); const classes = classnames("text-xl text-gray-500 dark:text-white leading-relaxed");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

3
components/ui/Text/Subtitle/Subtitle.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Subtitle: React.FunctionComponent<TextProps> = (props: TextProps) => { const Subtitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--subtitle"], props?.className, props?.color); const classes = classnames("ext-sm text-neutral-500 dark:text-white");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

52
components/ui/Text/Text.module.css
View file

@ -1,52 +0,0 @@
/* strong {
@apply font-medium;
} */
.text--body {
@apply text-lg leading-relaxed;
}
.text--overline {
@apply text-sm uppercase font-semibold leading-snug tracking-wide;
}
.text--caption {
@apply text-sm text-gray-500 leading-tight;
}
.text--caption2 {
@apply text-xs italic text-gray-500 leading-tight;
}
.text--footnote {
@apply text-base font-normal;
}
.text--headline {
/* @apply text-base font-normal; */
@apply text-3xl leading-8 font-semibold tracking-tight text-gray-900 sm:text-4xl;
}
.text--subheadline {
@apply text-xl text-gray-500 leading-relaxed;
}
.text--largetitle {
@apply text-2xl font-normal;
}
.text--subtitle {
@apply text-base font-normal;
}
.text--title {
@apply text-base font-normal;
}
.text--title2 {
@apply text-base font-normal;
}
.text--title3 {
@apply text-xs font-semibold leading-tight;
}

3
components/ui/Text/Title/Title.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Title: React.FunctionComponent<TextProps> = (props: TextProps) => { const Title: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--title"], props?.className, props?.color); const classes = classnames("font-medium text-neutral-900 dark:text-white");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

3
components/ui/Text/Title2/Title2.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Title2: React.FunctionComponent<TextProps> = (props: TextProps) => { const Title2: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--title2"], props?.className, props?.color); const classes = classnames("text-base font-normal text-gray-900 dark:text-white");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };

3
components/ui/Text/Title3/Title3.tsx
View file

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import classnames from "classnames"; import classnames from "classnames";
import { TextProps } from "../Text"; import { TextProps } from "../Text";
import Styles from "../Text.module.css";
const Title3: React.FunctionComponent<TextProps> = (props: TextProps) => { const Title3: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(Styles["text--title3"], props?.className, props?.color); const classes = classnames("text-xs font-semibold leading-tight text-gray-900 dark:text-white");
return <p className={classes}>{props.children}</p>; return <p className={classes}>{props.children}</p>;
}; };