design(preview): move refresh button inside the address bar for a cleaner layout
This commit is contained in:
@@ -112,7 +112,7 @@ function PreviewDeviceToggles() {
|
||||
gap: 6,
|
||||
background: "#fafafa",
|
||||
border: "1px solid #e4e4e7",
|
||||
padding: "4px 12px",
|
||||
padding: "4px 8px",
|
||||
borderRadius: 8,
|
||||
height: 34,
|
||||
flex: 1, // Let the URL bar grow to fill the header space
|
||||
@@ -121,7 +121,41 @@ function PreviewDeviceToggles() {
|
||||
fontSize: "0.75rem",
|
||||
}}
|
||||
>
|
||||
<span style={{ opacity: 0.6 }}>🌐</span>
|
||||
<button
|
||||
onClick={triggerRefresh}
|
||||
title="Reload Preview"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 4,
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.15s",
|
||||
background: "transparent",
|
||||
color: "#71717a",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "#e4e4e7";
|
||||
e.currentTarget.style.color = "#18181b";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "transparent";
|
||||
e.currentTarget.style.color = "#71717a";
|
||||
}}
|
||||
>
|
||||
<RotateCw size={12} />
|
||||
</button>
|
||||
<div
|
||||
style={{
|
||||
width: 1,
|
||||
height: 14,
|
||||
background: "#e4e4e7",
|
||||
margin: "0 2px",
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={displayUrl}
|
||||
@@ -135,6 +169,7 @@ function PreviewDeviceToggles() {
|
||||
color: "#18181b",
|
||||
fontSize: "0.75rem",
|
||||
textOverflow: "ellipsis",
|
||||
paddingLeft: 4,
|
||||
}}
|
||||
/>
|
||||
{displayUrl && (
|
||||
@@ -160,39 +195,6 @@ function PreviewDeviceToggles() {
|
||||
border: "1px solid #e4e4e7",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={triggerRefresh}
|
||||
title="Reload Preview"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 28,
|
||||
height: 26,
|
||||
borderRadius: 6,
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.15s",
|
||||
background: "transparent",
|
||||
color: "#71717a",
|
||||
marginRight: 4,
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = "#18181b")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = "#71717a")}
|
||||
>
|
||||
<RotateCw size={14} />
|
||||
</button>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: 1,
|
||||
height: 16,
|
||||
background: "#e4e4e7",
|
||||
alignSelf: "center",
|
||||
marginRight: 4,
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => setDeviceMode("desktop")}
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user