Skip to content

Commit 5199135

Browse files
author
Lewis Youl
committed
feature/Use one dark theme
1 parent d90fa5b commit 5199135

File tree

11 files changed

+79
-228
lines changed

11 files changed

+79
-228
lines changed

‎app/assets/stylesheets/themes/one-light.scss‎

Lines changed: 1 addition & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1 @@
1-
.CodeMirror.cm-s-one-light{
2-
color:#383a42;
3-
background-color:#c5ece5;
4-
}
5-
6-
.cm-s-one-light .CodeMirror-selected{
7-
background-color:#c3c3c3;
8-
}
9-
10-
.cm-s-one-light .CodeMirror-gutter,.cm-s-one-light .CodeMirror-gutters{
11-
border:none;
12-
background-color:#fafafa;
13-
}
14-
15-
.cm-s-one-light .CodeMirror-linenumber,.cm-s-one-light .CodeMirror-linenumbers{
16-
color:#929292!important;
17-
background-color:transparent;
18-
}
19-
20-
.cm-s-one-light .CodeMirror-lines{
21-
color:#27292f!important;
22-
background-color:transparent;
23-
}
24-
25-
.cm-s-one-light .CodeMirror-cursor{
26-
border-left:2px solid #526fff!important;
27-
}
28-
29-
.cm-s-one-light .cm-header{
30-
color:#e45649;
31-
}
32-
33-
.cm-s-one-light .cm-quote{
34-
color:#a0a1a7;
35-
font-style:italic;
36-
}
37-
38-
.cm-s-one-light .cm-negative{
39-
color:#e45649;
40-
}
41-
42-
.cm-s-one-light .cm-positive{
43-
color:#e45649;
44-
}
45-
46-
.cm-s-one-light .cm-strong{
47-
color:#986801;
48-
font-weight:700;
49-
}
50-
51-
.cm-s-one-light .cm-header .cm-strong{
52-
color:#986801;
53-
font-weight:700;
54-
}
55-
56-
.cm-s-one-light .cm-em{
57-
color:#a626a4;
58-
font-style:italic;
59-
}
60-
61-
.cm-s-one-light .cm-header .cm-em{
62-
color:#a626a4;
63-
font-style:italic;
64-
}
65-
66-
.cm-s-one-light .cm-tag{
67-
color:#e45649;
68-
}
69-
70-
.cm-s-one-light .cm-attribute{
71-
color:#d19a66;
72-
}
73-
74-
.cm-s-one-light .cm-link{
75-
color:#4078f2;
76-
border-bottom:solid 1px #4078f2;
77-
}
78-
79-
.cm-s-one-light .cm-string.cm-url{
80-
color:#0184bc;
81-
border-bottom:solid 1px #0184bc;
82-
}
83-
84-
.cm-s-one-light .cm-builtin{
85-
color:#e45649;
86-
}
87-
88-
.cm-s-one-light .cm-keyword{
89-
color:#a626a4;
90-
}
91-
92-
.cm-s-one-light .cm-def{
93-
color:#4078f2;
94-
}
95-
96-
.cm-s-one-light .cm-atom{
97-
color:#d19a66;
98-
}
99-
100-
.cm-s-one-light .cm-number{
101-
color:#986801;
102-
}
103-
104-
.cm-s-one-light .cm-property{
105-
color:#4078f2
106-
}
107-
108-
.cm-s-one-light .cm-qualifier{
109-
color:#986801;
110-
}
111-
112-
.cm-s-one-light .cm-variable{
113-
color:#e06c75;
114-
}
115-
116-
.cm-s-one-light .cm-variable-2{
117-
color:#e45649;
118-
}
119-
120-
.cm-s-one-light .cm-string{
121-
color:#50a14f;
122-
}
123-
124-
.cm-s-one-light .cm-punctuation{
125-
color:#383a42;
126-
}
127-
128-
.cm-s-one-light .cm-operator{
129-
color:#0184bc;
130-
}
131-
132-
.cm-s-one-light .cm-meta{
133-
color:#383a42;
134-
}
135-
136-
.cm-s-one-light .cm-bracket{
137-
color:#383a42;
138-
}
139-
140-
.cm-s-one-light .cm-comment{
141-
color:#a0a1a7;
142-
font-style:italic;
143-
}
144-
145-
.cm-s-one-light .cm-error{
146-
color:#e06c75;
147-
}
148-
149-
.cm-s-one-light .cm-m-css.cm-variable{
150-
color:#828997;
151-
}
152-
153-
.cm-s-one-light .cm-m-css.cm-property{
154-
color:#383a42;
155-
}
156-
157-
.cm-s-one-light .cm-m-css.cm-atom{
158-
color:#0184bc;
159-
}
160-
161-
.cm-s-one-light .cm-m-css.cm-builtin{
162-
color:#56b6c2;
163-
}
1+
.CodeMirror.cm-s-one-dark{color:#abb2bf;background-color:#373b42}.cm-s-one-dark .CodeMirror-selected{background-color:#3e4451}.cm-s-one-dark .CodeMirror-gutter,.cm-s-one-dark .CodeMirror-gutters{border:none;background-color:#282c34}.cm-s-one-dark .CodeMirror-linenumber,.cm-s-one-dark .CodeMirror-linenumbers{color:#5c6370!important;background-color:transparent}.cm-s-one-dark .CodeMirror-lines{color:#abb2bf!important;background-color:transparent}.cm-s-one-dark .CodeMirror-cursor{border-left:2px solid #56b6c2!important}.cm-s-one-dark .CodeMirror-matchingbracket,.cm-s-one-dark .CodeMirror-matchingtag{border-bottom:2px solid #56b6c2;color:#abb2bf!important;background-color:transparent}.cm-s-one-dark .CodeMirror-nonmatchingbracket{border-bottom:2px solid #e06c75;color:#abb2bf!important;background-color:transparent}.cm-s-one-dark .CodeMirror-foldgutter,.cm-s-one-dark .CodeMirror-foldgutter-folded,.cm-s-one-dark .CodeMirror-foldgutter-open,.cm-s-one-dark .CodeMirror-foldmarker{border:none;text-shadow:none;color:#5c6370!important;background-color:transparent}.cm-s-one-dark .CodeMirror-activeline-background{background-color:rgba(153,187,255,.04)}.cm-s-one-dark .cm-header{color:#e06c75}.cm-s-one-dark .cm-quote{color:#5c6370;font-style:italic}.cm-s-one-dark .cm-negative{color:#e06c75}.cm-s-one-dark .cm-positive{color:#e06c75}.cm-s-one-dark .cm-strong{color:#d19a66;font-weight:700}.cm-s-one-dark .cm-header .cm-strong{color:#d19a66;font-weight:700}.cm-s-one-dark .cm-em{color:#c678dd;font-style:italic}.cm-s-one-dark .cm-header .cm-em{color:#c678dd;font-style:italic}.cm-s-one-dark .cm-tag{color:#e06c75}.cm-s-one-dark .cm-attribute{color:#d19a66}.cm-s-one-dark .cm-link{color:#98c379;border-bottom:solid 1px #98c379}.cm-s-one-dark .cm-builtin{color:#e06c75}.cm-s-one-dark .cm-keyword{color:#c678dd}.cm-s-one-dark .cm-def{color:#e5c07b}.cm-s-one-dark .cm-atom{color:#d19a66}.cm-s-one-dark .cm-number{color:#d19a66}.cm-s-one-dark .cm-property{color:#56b6c2}.cm-s-one-dark .cm-qualifier{color:#d19a66}.cm-s-one-dark .cm-variable{color:#e06c75}.cm-s-one-dark .cm-string{color:#98c379}.cm-s-one-dark .cm-punctuation{color:#abb2bf}.cm-s-one-dark .cm-operator{color:#56b6c2}.cm-s-one-dark .cm-meta{color:#abb2bf}.cm-s-one-dark .cm-bracket{color:#abb2bf}.cm-s-one-dark .cm-comment{color:#5c6370;font-style:italic}.cm-s-one-dark .cm-error{color:#e06c75}.cm-s-one-dark .cm-m-css.cm-variable{color:#828997}.cm-s-one-dark .cm-m-css.cm-property{color:#abb2bf}.cm-s-one-dark .cm-m-css.cm-atom{color:#56b6c2}.cm-s-one-dark .cm-m-css.cm-builtin{color:#56b6c2}.cm-s-one-dark .cm-m-lua.cm-variable{color:#56b6c2}

‎app/javascript/controllers/codemirror_controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default class extends Controller {
2828

2929
initializeCodeMirror() {
3030
this.codeMirror = CodeMirror.fromTextArea(this.mirrorTarget, {
31-
theme: 'one-light',
31+
theme: 'one-dark',
3232
mode: "javascript",
3333
readOnly: this.readOnlyValue ? 'nocursor' : false,
3434
scrollbarStyle: "null"

‎app/javascript/stylesheets/application.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55

66
.CodeMirror {
77
/* Set height, width, borders, and global font properties here */
8-
@apply font-mono p-2 rounded-md border text-sm;
8+
@apply font-mono p-2 text-sm rounded-br-md rounded-bl-md;
99
height: auto;
1010
color: black;
1111
direction: ltr;
1212
// overflow-y: scroll;
13+
padding-left: 14px;
1314
}
1415

1516
@import '../../assets/stylesheets/themes/one-light.scss';

‎app/views/shared/_sidebar.html.erb‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@
1616

1717
<%= render partial: 'shared/connect' %>
1818

19-
<div>
20-
<p class="text-center text-xs text-gray-500">by <%= link_to '@lewisyoul', 'https://twitter.com/lewisyoul', target: '_blank', class: 'hover:underline' %></p>
21-
</div>
19+
2220

2321
</div>
2422
</aside>

‎app/views/shared/cards/_card.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div
2-
class="px-4 py-5 sm:p-4 bg-white shadow rounded-sm mb-4 <%= defined?(classes) ? classes : '' %>"
2+
class="px-4 py-5 sm:p-4 bg-white shadow rounded-md mb-4 <%= defined?(classes) ? classes : '' %>"
33
<% if defined?(id) %>
44
id="<%= id %>"
55
<% end %>

‎app/views/shared/cards/_card_navigation.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<div class="bg-white overflow-hidden shadow rounded-sm mb-4 cursor-pointer hover:shadow-md transition"
1+
<div class="bg-white overflow-hidden shadow rounded-md mb-4 cursor-pointer hover:shadow-md transition"
22
<% if defined?(id) %>
33
id="<%= id %>"
44
<% end %>
55
data-controller="navigation"
66
data-navigation-url-value="<%= url %>"
77
data-action="click->navigation#navigate"
88
>
9-
<div class="px-4 py-5 sm:p-4">
9+
<div class="<%= defined?(classes) ? classes : '' %>">
1010
<%= yield %>
1111
</div>
1212
</div>

‎app/views/shared/cards/_card_no_padding.html.erb‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1-
<div class="bg-white shadow rounded-sm mb-4 <%= defined?(classes) ? classes : '' %>">
1+
<div
2+
class="bg-white shadow rounded-md mb-4 <%= defined?(classes) ? classes : '' %>"
3+
<% if defined?(id) %>
4+
id="<%= id %>"
5+
<% end %>
6+
<% if defined?(data) %>
7+
<% data.each do |key, value| %>
8+
data-<%= key.to_s.dasherize %>="<%= value %>"
9+
<% end %>
10+
<% end %>
11+
>
212
<%= yield %>
313
</div>

‎app/views/snippets/_snippet.html.erb‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
<% folder = snippet.folder_for_user(current_user) %>
22

3-
<%= render 'shared/cards/card', id: snippet.client_id, data: { controller: "snippets", action: "snippet-updated@window->snippets#update", redirect_after_delete: true } do %>
4-
<div class="relative flex items-start space-x-3">
5-
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
6-
<div>
7-
<div style="display: flex; flex-direction: column;">
8-
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
9-
<% if snippet.private? %>
10-
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
11-
<% end %>
12-
<div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
13-
<span class="block text-xs"><%= snippet.language.name %></span>
3+
<%= render 'shared/cards/card_no_padding', id: snippet.client_id, data: { controller: "snippets", action: "snippet-updated@window->snippets#update", redirect_after_delete: true } do %>
4+
<div class="px-4 py-5 sm:pb-0">
5+
<div class="relative flex items-start space-x-3">
6+
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
7+
<div>
8+
<div style="display: flex; flex-direction: column;">
9+
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
10+
<% if snippet.private? %>
11+
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
12+
<% end %>
13+
<div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
14+
<span class="block text-xs"><%= snippet.language.name %></span>
15+
</div>
16+
<% if @display_popover %>
17+
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
18+
<% end %>
1419
</div>
15-
<% if @display_popover %>
16-
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
17-
<% end %>
1820
</div>
1921
</div>
2022
</div>
21-
</div>
2223

23-
<div class="flex mt-4 mb-2 justify-between">
24-
<div>
25-
<h5 class="m-0"><%= snippet.description %></h5>
26-
</div>
24+
<div class="flex mt-4 mb-2 justify-between">
25+
<div>
26+
<h5 class="m-0"><%= snippet.description %></h5>
27+
</div>
2728

28-
<div class="flex">
29-
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
30-
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
29+
<div class="flex">
30+
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
31+
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
32+
</div>
3133
</div>
3234
</div>
3335

‎app/views/snippets/_snippet_preview.html.erb‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
<%= render 'shared/cards/card_navigation', url: snippet_path(snippet), id: snippet.client_id do %>
22
<div>
3-
<div class="relative flex items-start space-x-3">
4-
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
5-
<div>
6-
<div style="display: flex; flex-direction: column;">
7-
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
8-
<% if snippet.private? %>
9-
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
10-
<% end %>
11-
<div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
12-
<span class="block text-xs"><%= snippet.language.name %></span>
3+
<div class="px-4 py-5 sm:pb-0">
4+
<div class="relative flex items-start space-x-3">
5+
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
6+
<div>
7+
<div style="display: flex; flex-direction: column;">
8+
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
9+
<% if snippet.private? %>
10+
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
11+
<% end %>
12+
<div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
13+
<span class="block text-xs"><%= snippet.language.name %></span>
14+
</div>
15+
<% if @display_popover %>
16+
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
17+
<% end %>
1318
</div>
14-
<% if @display_popover %>
15-
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
16-
<% end %>
1719
</div>
1820
</div>
1921
</div>
20-
</div>
2122

22-
<div class="flex mt-4 mb-2 justify-between">
23-
<div>
24-
<h5 class="m-0"><%= snippet.description %></h5>
25-
</div>
23+
<div class="flex mt-4 mb-2 justify-between">
24+
<div>
25+
<h5 class="m-0"><%= snippet.description %></h5>
26+
</div>
2627

27-
<div class="flex">
28-
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
29-
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
28+
<div class="flex">
29+
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
30+
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
31+
</div>
3032
</div>
3133
</div>
3234

0 commit comments

Comments
 (0)