h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Part 1 of top bar UI refresh (#603)

Browse Source 
* Hitting enter should rename project title

* Part 1 of topbar styling refresh
This commit was merged in pull request #603.
This commit is contained in:
Todd Medema
2022-01-24 15:46:00 -05:00
committed by GitHub
parent 0a6439161e
commit f30eeb2b95
3 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
View File

@@ -53,14 +53,14 @@ const EditableProjectTitle = ({
<>
{!inEditMode && (
<>
<Link
/<Link
className="underline-hovered"
to={routes.project({
userName,
projectTitle,
})}
className="pl-4"
>
/{projectTitle}
{projectTitle}
</Link>
{canEdit && (
<button

20
app/web/src/components/IdeHeader/IdeHeader.tsx
View File

@@ -102,9 +102,9 @@ export default function IdeHeader({
<div className="flex h-full items-center text-gray-300">
{project?.id && (
<>
<span className="bg-ch-gray-700 h-full grid grid-flow-col-dense items-center gap-2 px-4">
<Gravatar image={project?.user?.image} className="w-10" />
<span className="h-full grid grid-flow-col-dense items-center gap-2 ml-4">
<Link
className="underline-hovered"
to={routes.user({
userName: projectOwner,
})}
@@ -129,7 +129,7 @@ export default function IdeHeader({
<TopButton
onClick={onClick}
name="Save Project Image"
className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
>
<Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
</TopButton>
@@ -138,19 +138,19 @@ export default function IdeHeader({
)}
{!isProfile && (
<TopButton
className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
onClick={handleRender}
name={canEdit ? 'Save' : 'Preview'}
>
<Svg
name={canEdit ? 'floppy-disk' : 'photograph'}
className="w-6 h-6 text-ch-pink-500"
className="w-6 h-6 text-ch-blue-400"
/>
</TopButton>
)}
{isProfile && (
<TopButton
className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
onClick={() =>
navigate(
routes.ide({
@@ -161,7 +161,7 @@ export default function IdeHeader({
}
name="Editor"
>
<Svg name="terminal" className="w-6 h-6 text-ch-pink-500" />
<Svg name="terminal" className="w-6 h-6 text-ch-blue-400" />
</TopButton>
)}
<Popover className="relative outline-none w-full h-full">
@@ -172,11 +172,11 @@ export default function IdeHeader({
<TopButton
Tag="div"
name="Share"
className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
>
<Svg
name="share"
className="w-6 h-6 text-ch-purple-500 mt-1"
className="w-6 h-6 text-ch-blue-400 mt-1"
/>
</TopButton>
</Popover.Button>
@@ -221,7 +221,7 @@ export default function IdeHeader({
<div className="fixed bg-white w-60 h-10 top-16 right-24 z-10 rounded-md text-sm flex p-2 items-center">
<Svg
name="exclamation-circle"
className="w-8 h-8 mx-2 text-ch-blue-500"
className="w-8 h-8 mx-2 text-ch-blue-400"
/>{' '}
Fork to save your work
</div>

3
app/web/src/index.css
View File

@@ -144,3 +144,6 @@ label {
input.error, textarea.error {
border: 1px solid red;
}
a.underline-hovered:hover {
text-decoration: underline;
}