Skip to content

Commit

Permalink
updating ui for view screns
Browse files Browse the repository at this point in the history
  • Loading branch information
@moovendhan-v
moovendhan-v committed Apr 1, 2024
1 parent 4dc38b3 commit b0daa9c
Show file tree
Hide file tree
Showing 5 changed files with 240 additions and 226 deletions.
136 changes: 40 additions & 96 deletions ui_tailwind_shadecn/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,110 +2,54 @@
@tailwind components;
@tailwind utilities;

@layer base {

@layer base {


@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.3rem;
--background: 229 57% 100%;
--foreground: 229 63% 4%;
--muted: 229 12% 86%;
--muted-foreground: 229 10% 37%;
--popover: 0 0% 99%;
--popover-foreground: 229 63% 3%;
--card: 0 0% 99%;
--card-foreground: 229 63% 3%;
--border: 220 13% 91%;
--input: 229 39% 81%;
--primary: 229 100% 62%;
--primary-foreground: 0 0% 100%;
--secondary: 229 23.92% 79.44%;
--secondary-foreground: 229 20% 30%;
--accent: 229 28% 85%;
--accent-foreground: 229 28% 25%;
--destructive: 3 100% 50%;
--destructive-foreground: 3 0% 100%;
--ring: 229 100% 62%;
--radius: 0.5rem;
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
--background: 229 41% 4%;
--foreground: 229 23% 99%;
--muted: 229 12% 14%;
--muted-foreground: 229 10% 63%;
--popover: 229 41% 5%;
--popover-foreground: 0 0% 100%;
--card: 229 41% 5%;
--card-foreground: 0 0% 100%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--primary: 229 100% 62%;
--primary-foreground: 0 0% 100%;
--secondary: 229 14% 8%;
--secondary-foreground: 229 14% 68%;
--accent: 229 23% 17%;
--accent-foreground: 229 23% 77%;
--destructive: 3 89% 54%;
--destructive-foreground: 0 0% 100%;
--ring: 229 100% 62%;
}
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
}
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}

@layer base {
* {
Expand Down
5 changes: 3 additions & 2 deletions ui_tailwind_shadecn/src/components/custom_ui/OutputComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ interface OutputOfComponentsProps {
const OutputsOfComponents: React.FC<OutputOfComponentsProps> = ({ html, css, js, type, mode }) => {
const backgroundColor = mode === true ? '#1e1e1e' : 'whitesmoke';
const fontColor = type === ComponentType.VIEW ? 'white' : "black";
const borderRadius = type === ComponentType.VIEW ? "rounded-l-lg":"rounded-md";
const iframeContent = `
<html className="bg-primary" style="width: 100%;height: 100%; position: relative;display: ${type === ComponentType.COMPONENTS ? "flex" : ""};align-items: ${type === ComponentType.COMPONENTS ? "center" : ""};justify-content: center;cursor: pointer;z-index: 1; background:${backgroundColor}; color:${fontColor}">
<html className="bg-primary " style="width: 100%;height: 100%; position: relative;display: ${type === ComponentType.COMPONENTS ? "flex" : ""};align-items: ${type === ComponentType.COMPONENTS ? "center" : ""};justify-content: center;cursor: pointer;z-index: 1; background:${backgroundColor}; color:${fontColor}">
<head>
<style>${css}</style>
</head>
Expand All @@ -30,7 +31,7 @@ const OutputsOfComponents: React.FC<OutputOfComponentsProps> = ({ html, css, js,
srcDoc={iframeContent}
style={{ width: "100%", height: type }}
sandbox="allow-scripts"
className=" transition-opacity duration-300"
className={`transition-opacity duration-300 ${borderRadius}`}
/>
</div>
); ``
Expand Down
2 changes: 1 addition & 1 deletion ui_tailwind_shadecn/src/components/ui/resizable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ResizableHandle = ({
}) => (
<ResizablePrimitive.PanelResizeHandle
className={cn(
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 px-1",
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
className
)}
{...props}
Expand Down
3 changes: 3 additions & 0 deletions ui_tailwind_shadecn/src/screens/Components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export function Components() {
</Link>
</nav>
</div>

<div className="mt-auto p-4">
<Card>
<CardHeader className="p-2 pt-0 md:p-4">
Expand Down Expand Up @@ -121,6 +122,7 @@ export function Components() {
<span className="sr-only">Toggle navigation menu</span>
</Button>
</SheetTrigger>

<SheetContent side="left" className="flex flex-col">
<nav className="grid gap-2 text-lg font-medium">
<Link
Expand Down Expand Up @@ -185,6 +187,7 @@ export function Components() {
</Card>
</div>
</SheetContent>

</Sheet>
<div className="w-full flex-1">
<form>
Expand Down
Loading

0 comments on commit b0daa9c

Please sign in to comment.