Skip to content

Commit

Permalink
fix: Refactor Inline Styles of App.tsx to global.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arindam200
Arindam200 committed Feb 15, 2024
1 parent 9d8272e commit 98b1f83
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 104 deletions.
119 changes: 17 additions & 102 deletions src/app/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,114 +88,40 @@ export function App(): React.JSX.Element {


return (
<div style={{ padding: '10px 20px'}}>
<div className="container">
<Header isConnected={ !error} />
{error && <div style={{border: '2px solid black',
backgroundColor: '#0e1111',
color: 'red',
// minWidth: '1175px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',marginBottom:"10px"}}> Pieces OS is not running in the background. Click You're Not Connected to connect </div>}
<div style={{display:'flex',flex:1,flexDirection:'row-reverse'}}>
<div style={{border: '2px solid black',
backgroundColor: '#0e1111',
height: '600px',
minWidth: '250px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
flex:1,
flexDirection: 'column',
boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',}}>
<h3 style={{color: 'white', fontWeight: 'normal' }}>Workflow Activity</h3>
{error && <div className="error-container"> Pieces OS is not running in the background. Click You're Not Connected to connect </div>}
<div className="flex-container">
<div className="workflow-activity-container">
<h3 className="activity-heading">Workflow Activity</h3>
<WorkflowActivityList />
</div>
<div style={{
// width: "auto",
border: '2px solid yellow',
backgroundColor: '#0e1111',
height: '600px',
minWidth: '1000px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
flex: 1,
marginRight: '10px',
boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',
}}>
<div style={{minHeight: '100%', display: "flex", flexDirection: "column", justifyContent: 'space-between'}}>

<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<h2 style={{color: 'white', fontWeight: 'normal', margin: '5px'}}>Saved Snippets</h2>
<button style={{
maxWidth: 'fit-content',
height: 'fit-content',
marginLeft: '10px',
backgroundColor: "black",
border: '1px solid white',
borderRadius: '5px',
padding: '8px 24px',
color: 'white',
flexWrap: 'nowrap',
cursor: 'pointer',
fontSize: '12px'
}} onClick={refreshSnippetList}>Refresh Snippet List
<div className="snippets-container">
<div className="snippets-header">
<div className="snippets-subheader">
<h2 className="snippets-heading">Saved Snippets</h2>
<button className="refresh-btn" onClick={refreshSnippetList}>Refresh Snippet List
</button>
<button style={{
maxWidth: 'fit-content',
height: 'fit-content',
marginLeft: '10px',
backgroundColor: "black",
border: '1px solid white',
borderRadius: '5px',
padding: '8px 24px',
color: 'white',
flexWrap: 'nowrap',
cursor: 'pointer',
fontSize: '12px'
}} onClick={handleDeSelect}>DESELECT
<button className="deselect-btn" onClick={handleDeSelect}>DESELECT
</button>
<DeleteAssetButton assetID={((selectedIndex < array.length && selectedIndex!=-1) ? array[selectedIndex].id : "" )} selectedIndex={selectedIndex} setArray={setArray}/>
</div>

<div style={{
overflowY: "scroll",
minWidth: '700px',
minHeight: "80%",
paddingRight: '5px',
display: "grid",
gridTemplateColumns: 'repeat(3, 1fr)',
gridTemplateRows: 'repeat(3, 1fr)',
gap: '5px'
}}>
<div className="snippets-grid">
{array.map((item: LocalAsset, index) => (
<div
onKeyDown={handleKeyPress}
tabIndex={0}
key={index}
className="snippet-item"
style={{
margin: '5px',
alignItems: 'center',
padding: "10px",
borderRadius: '5px',
height: '200px',
width: '200px',
display: 'flex',
flexDirection: 'row',
justifyContent: "space-between",
backgroundColor: selectedIndex == index ? 'lightblue' : 'white', // Add background color based on selection
cursor: 'pointer' // Add cursor style to indicate clickability
}}
onClick={() => handleSelect(index)}
>
<div>
<h3>{item.name}</h3>
<div style={{flexDirection: "column"}}>
<div className="snippet-details">
<p>{item.id}</p>
<p>{item.classification}</p>
</div>
Expand All @@ -206,8 +132,8 @@ export function App(): React.JSX.Element {
</div>
</div>

<div style={{display: 'flex', flexDirection: 'column', padding: '10px', maxHeight: '90%', alignSelf: 'end',marginLeft:'10px'}}>
<h3 style={{color: 'white', fontWeight: 'normal' }}>Create a New Snippet</h3>
<div className="snippet-grid-container">
<h3 className="snippets-heading-2">Create a New Snippet</h3>
<DataTextInput applicationData={applicationData}/>
<RenameAssetInput assetID={((selectedIndex < array.length && selectedIndex!=-1) ? array[selectedIndex].id : "")}/>

Expand All @@ -216,18 +142,7 @@ export function App(): React.JSX.Element {
</div>

{/* this is the copilot container. the copilot logic is inside the /components/Copilot.tsx */}
<div style={{
border: '2px solid black',
backgroundColor: '#0e1111',
height: '600px',
// minWidth: '1175px',
// maxWidth: '1175px',
padding: '20px',
borderRadius: '9px',
display: "flex",
boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',
marginTop: '20px'
}}>
<div className="copilot-container">
<CopilotChat />
</div>

Expand Down
151 changes: 149 additions & 2 deletions src/app/global.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
/* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> */

html {
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
}

::-webkit-scrollbar {
Expand All @@ -21,4 +21,151 @@ html {
background-color: #b3b2b2;
}

.container {
padding: 10px 20px;
}

.error-container {
border: 2px solid black;
background-color: #0e1111;
color: red;
/* minWidth: '1175px',
maxWidth: '1175px', */
padding: 20px;
border-radius: 9px;
display: flex;
box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}

.flex-container {
display: flex;
flex: 1;
flex-direction: row-reverse;
}

.workflow-activity-container {
border: 2px solid black;
background-color: #0e1111;
height: 600px;
min-width: 250px;
/* maxWidth: '1175px', */
padding: 20px;
border-radius: 9px;
display: flex;
flex: 1;
flex-direction: column;
box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
}

.activity-heading {
color: white;
font-weight: normal;
}

.snippets-container {
/* width: "auto", */
border: 2px solid yellow;
background-color: #0e1111;
height: 600px;
min-width: 1000px;
/* maxWidth: '1175px', */
padding: 20px;
border-radius: 9px;
display: flex;
flex: 1;
margin-right: 10px;
box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
}

.snippets-header {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.snippets-subheader {
display: flex;
flex-direction: row;
align-items: center;
}

.snippets-heading {
color: white;
font-weight: normal;
margin: 5px;
}

.snippets-heading-2 {
color: white;
font-weight: normal;
}

.snippet-grid-container {
display: flex;
flex-direction: column;
padding: 10px;
max-height: 90%;
align-self: end;
margin-left: 10px;
}

.refresh-btn,
.deselect-btn {
max-width: fit-content;
height: fit-content;
margin-left: 10px;
background-color: black;
border: 1px solid white;
border-radius: 5px;
padding: 8px 24px;
color: white;
flex-wrap: nowrap;
cursor: pointer;
font-size: 12px;
}

.snippets-grid {
overflow-y: scroll;
min-width: 700px;
min-height: 80%;
padding-right: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 5px;
}

.snippet-item {
margin: 5px;
align-items: center;
padding: 10px;
border-radius: 5px;
height: 200px;
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
/* background-color: white; */
cursor: pointer; /* Add cursor style to indicate clickability */
}

.snippet-item.selected {
background-color: lightblue;
}

.snippet-details {
flex-direction: column;
}

.copilot-container {
border: 2px solid black;
background-color: #0e1111;
height: 600px;
padding: 20px;
border-radius: 9px;
display: flex;
box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}

0 comments on commit 98b1f83

Please sign in to comment.