jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add style constants to index.css file (#601)

Browse source 
Improves code verbosity and organization of Tailwind classes.
This commit is contained in:
anovazzi1 2023-07-04 17:55:10 -03:00 • committed by GitHub
commit 3fd22bbbf3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/constants.tsx
View file

@ -179,14 +179,6 @@ export const COLUMN_DIV_STYLE =
*/
export const NAV_DISPLAY_STYLE =
" w-full flex justify-between py-12 pb-2 px-6 ";
/**
* The base text for subtitle of code dialog
* @constant
*/
export const BUTTON_DIV_STYLE = " flex gap-2 ";
(" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
/**
* Header text for user projects
* @constant

13
src/frontend/src/index.css
View file

@ -143,6 +143,18 @@ The cursor: default; property value restores the browser's default cursor style
@layer components {
.extra-side-bar-save-disable {
@apply text-muted-foreground
}
.extra-side-bar-buttons {
@apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out
}
.extra-side-bar-buttons:hover {
@apply hover:bg-muted
}
.button-div-style {
@apply gap-2 flex
}
.input-primary:focus{
@apply focus:placeholder-transparent focus:ring-ring focus:border-ring
}
@ -161,4 +173,5 @@ The cursor: default; property value restores the browser's default cursor style
.input-dialog{
@apply text-ring cursor-pointer bg-transparent
}
}

10
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -63,7 +63,7 @@ export default function ExtraSidebar() {
<div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
<ShadTooltip content="Import" side="top">
<button
className="relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
className="extra-side-bar-buttons"
onClick={() => {
// openPopUp(<ImportModal />);
uploadFlow();
@ -76,7 +76,7 @@ export default function ExtraSidebar() {
<ShadTooltip content="Export" side="top">
<button
className={classNames(
"relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
"extra-side-bar-buttons"
)}
onClick={(event) => {
openPopUp(<ExportModal />);
@ -88,7 +88,7 @@ export default function ExtraSidebar() {
<ShadTooltip content="Code" side="top">
<button
className={classNames(
"relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
"extra-side-bar-buttons"
)}
onClick={(event) => {
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@ -100,7 +100,7 @@ export default function ExtraSidebar() {
<ShadTooltip content="Save" side="top">
<button
className="relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
className="extra-side-bar-buttons"
onClick={(event) => {
saveFlow(flows.find((f) => f.id === tabId));
setSuccessData({ title: "Changes saved successfully" });
@ -110,7 +110,7 @@ export default function ExtraSidebar() {
<Save
strokeWidth={1.5}
className={
"h-5 w-5" + (isPending ? " " : " text-muted-foreground")
"h-5 w-5" + (isPending ? " " : " extra-side-bar-save-disable")
}
></Save>
</button>

3
src/frontend/src/pages/MainPage/index.tsx
View file

@ -5,7 +5,6 @@ import { Button } from "../../components/ui/button";
import { Link, useNavigate } from "react-router-dom";
import { CardComponent } from "../../components/cardComponent";
import { USER_PROJECTS_HEADER } from "../../constants";
import { BUTTON_DIV_STYLE } from "../../constants";
export default function HomePage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
useContext(TabsContext);
@ -20,7 +19,7 @@ export default function HomePage() {
<Home className="w-6" />
{USER_PROJECTS_HEADER}
</span>
<div className={`${BUTTON_DIV_STYLE}`}>
<div className="button-div-style">
<Button
variant="primary"
onClick={() => {