fizzy/app/views/users/_theme.html.erb at a83eedfb4772107a95dc6a209b4be4fdcacb017c · basecamp/fizzy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<section class="settings__section">
  <header>
    <h2 class="divider">Appearance</h2>
  </header>

  <div class="theme-switcher flex gap max-width justify-center txt-small margin-block-start-half">
    <label class="btn theme-switcher__btn">
      <%= icon_tag "sun" %>
      <span class="overflow-ellipsis">Always light</span>
      <input type="radio" name="theme" data-action="click->theme#setLight" data-theme-target="lightButton">
    </label>

    <label class="btn theme-switcher__btn" >
      <%= icon_tag "moon" %>
      <span class="overflow-ellipsis">Always dark</span>
      <input type="radio" name="theme" data-action="click->theme#setDark" data-theme-target="darkButton">
    </label>

    <label class="btn theme-switcher__btn">
      <%= icon_tag "monitor" %>
      <span class="overflow-ellipsis">Same as OS</span>
      <input type="radio" name="theme" data-action="click->theme#setAuto" data-theme-target="autoButton">
    </label>
  </div>
</section>

<section class="settings__section" data-controller="motion">
  <header>
    <h2 class="divider">Motion</h2>
  </header>

  <div class="theme-switcher flex gap max-width justify-center txt-small margin-block-start-half">
    <label class="btn theme-switcher__btn">
      <%= icon_tag "monitor" %>
      <span class="overflow-ellipsis">Same as OS</span>
      <input type="radio" name="motion" data-action="click->motion#setAuto" data-motion-target="autoButton">
    </label>

    <label class="btn theme-switcher__btn">
      <%= icon_tag "minus" %>
      <span class="overflow-ellipsis">Reduce motion</span>
      <input type="radio" name="motion" data-action="click->motion#setReduce" data-motion-target="reduceButton">
    </label>

    <label class="btn theme-switcher__btn">
      <%= icon_tag "bolt" %>
      <span class="overflow-ellipsis">Always animate</span>
      <input type="radio" name="motion" data-action="click->motion#setAnimate" data-motion-target="animateButton">
    </label>
  </div>
</section>