Skip to content

Commit dc3d2f2

Browse files
devvaannshdevvaannsh
committed
refactor: match live preview AI box styling with phoenix styling convention
1 parent 03a1dca commit dc3d2f2

File tree

1 file changed

+52
-27
lines changed

1 file changed

+52
-27
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1364,6 +1364,12 @@ function RemoteFunctions(config = {}) {
13641364
<svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
13651365
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
13661366
</svg>
1367+
`,
1368+
1369+
paperPlane: `
1370+
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
1371+
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
1372+
</svg>
13671373
`
13681374
};
13691375

@@ -1900,9 +1906,9 @@ function RemoteFunctions(config = {}) {
19001906
19011907
.phoenix-ai-prompt-box {
19021908
position: absolute !important;
1903-
background: white !important;
1909+
background: #3C3F41 !important;
19041910
border: 1px solid #4285F4 !important;
1905-
border-radius: 8px !important;
1911+
border-radius: 4px !important;
19061912
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
19071913
font-family: Arial, sans-serif !important;
19081914
z-index: 2147483647 !important;
@@ -1919,72 +1925,87 @@ function RemoteFunctions(config = {}) {
19191925
width: 100% !important;
19201926
height: ${boxHeight}px !important;
19211927
border: none !important;
1922-
border-radius: 8px !important;
1928+
border-radius: 4px 4px 0 0 !important;
19231929
padding: 12px 40px 12px 16px !important;
19241930
font-size: 14px !important;
19251931
font-family: Arial, sans-serif !important;
19261932
resize: none !important;
19271933
outline: none !important;
19281934
box-sizing: border-box !important;
1929-
background: #f9f9f9 !important;
1935+
background: transparent !important;
1936+
color: #c5c5c5 !important;
1937+
transition: background 0.2s ease !important;
19301938
}
19311939
19321940
.phoenix-ai-prompt-textarea:focus {
1933-
background: white !important;
1941+
background: rgba(255, 255, 255, 0.03) !important;
19341942
}
19351943
19361944
.phoenix-ai-prompt-textarea::placeholder {
1937-
color: #999 !important;
1945+
color: #a0a0a0 !important;
1946+
opacity: 0.7 !important;
19381947
}
19391948
19401949
.phoenix-ai-prompt-send-button {
1941-
width: 28px !important;
1942-
height: 28px !important;
1943-
border: none !important;
1944-
border-radius: 50% !important;
1945-
background: #4285F4 !important;
1946-
color: white !important;
1950+
background-color: transparent !important;
1951+
border: 1px solid transparent !important;
1952+
color: #a0a0a0 !important;
1953+
border-radius: 4px !important;
19471954
cursor: pointer !important;
1955+
padding: 3px 6px !important;
19481956
display: flex !important;
19491957
align-items: center !important;
19501958
justify-content: center !important;
19511959
font-size: 14px !important;
1952-
transition: background-color 0.2s !important;
1953-
line-height: 0.5 !important;
1960+
transition: all 0.2s ease !important;
19541961
}
19551962
19561963
.phoenix-ai-prompt-send-button:hover:not(:disabled) {
1957-
background: #4285F4 !important;
1964+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
1965+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
19581966
}
19591967
19601968
.phoenix-ai-prompt-send-button:disabled {
1961-
background: #dadce0 !important;
1962-
color: #9aa0a6 !important;
1969+
opacity: 0.5 !important;
19631970
cursor: not-allowed !important;
19641971
}
19651972
19661973
.phoenix-ai-bottom-controls {
1967-
border-top: 1px solid #e0e0e0 !important;
1974+
border-top: 1px solid rgba(255,255,255,0.14) !important;
19681975
padding: 8px 16px !important;
1969-
background: #f9f9f9 !important;
1970-
border-radius: 0 0 8px 8px !important;
1976+
background: transparent !important;
1977+
border-radius: 0 0 4px 4px !important;
19711978
display: flex !important;
19721979
align-items: center !important;
19731980
justify-content: space-between !important;
19741981
}
19751982
19761983
.phoenix-ai-model-select {
19771984
padding: 4px 8px !important;
1978-
border: 1px solid #ddd !important;
1985+
border: 1px solid transparent !important;
19791986
border-radius: 4px !important;
19801987
font-size: 12px !important;
1981-
background: white !important;
1988+
background: transparent !important;
1989+
color: #a0a0a0 !important;
19821990
outline: none !important;
19831991
cursor: pointer !important;
1992+
transition: all 0.2s ease !important;
1993+
}
1994+
1995+
.phoenix-ai-model-select:hover {
1996+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
1997+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
19841998
}
19851999
19862000
.phoenix-ai-model-select:focus {
1987-
border-color: #4285F4 !important;
2001+
border: 1px solid rgba(0, 0, 0, 0.24) !important;
2002+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
2003+
}
2004+
2005+
.phoenix-ai-model-select option {
2006+
background: #000 !important;
2007+
color: #fff !important;
2008+
padding: 4px 8px !important;
19882009
}
19892010
`;
19902011

@@ -2003,7 +2024,7 @@ function RemoteFunctions(config = {}) {
20032024
<option value="slow">Slow AI</option>
20042025
</select>
20052026
<button class="phoenix-ai-prompt-send-button" disabled>
2006-
➤
2027+
${ICONS.paperPlane}
20072028
</button>
20082029
</div>
20092030
</div>
@@ -2377,7 +2398,6 @@ function RemoteFunctions(config = {}) {
23772398
align-items: stretch !important;
23782399
border-radius: 6px !important;
23792400
margin-left: 8px !important;
2380-
padding: 2px 2px 2px 4px !important;
23812401
border: 1px solid rgba(255,255,255,0.14) !important;
23822402
}
23832403
@@ -2395,10 +2415,15 @@ function RemoteFunctions(config = {}) {
23952415
background: transparent !important;
23962416
border: none !important;
23972417
outline: none !important;
2398-
color: #a0a0a0 !important;
2418+
color: #c5c5c5 !important;
23992419
width: 150px !important;
2400-
padding: 2px 6px !important;
2420+
padding: 4px 8px !important;
24012421
border-radius: 4px 0 0 4px !important;
2422+
transition: background 0.2s ease !important;
2423+
}
2424+
2425+
.phoenix-ribbon-search input:focus {
2426+
background: rgba(255, 255, 255, 0.03) !important;
24022427
}
24032428
24042429
.phoenix-ribbon-search input::placeholder {

0 commit comments

Comments
 (0)