Update Icons to new versions from design system

[olmoh]

Replaces all icons in app with new ones from design system and modifies layouts to work with these changes.

---

This change is 

[linear]

DES-1648 Update icons in app to latest version from design system

[MarkusPettersson98]

Reviewed 1 of 137 files at r1, 33 of 36 files at r9, 34 of 173 files at r14, 172 of 204 files at r15, 1 of 2 files at r16, 34 of 34 files at r17, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @olmoh)

---

desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx line 21 at r15 (raw file):

  large: 32,
  big: 48,
};

Are these supposed to be redefined here, or should they be shared with Icon.tsx? 😊

Code quote:

const sizes = {
  tiny: 12,
  small: 16,
  medium: 24,
  large: 32,
  big: 48,
};

---

desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx line 236 at r15 (raw file):

      <StyledForm>
        <StyledStatusIcon>
          <Image source="icon-success" height={60} width={60} />

How come this is not an Icon element? 😊

Code quote:

<Image source="icon-success" height={60} width={60} />

[MarkusPettersson98]

Reviewed 2 of 3 files at r18, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @olmoh)

[olmoh]

Reviewable status: 161 of 212 files reviewed, 2 unresolved discussions (waiting on @MarkusPettersson98)

---

desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx line 236 at r15 (raw file):

Previously, MarkusPettersson98 (Markus Pettersson) wrote…

How come this is not an Icon element? 😊

My reasoning was to separate images and icons, and only calling icons that are part of the icon section of our design system icons. The rest are images, but I can see this being confusing. But I noticed we have a component called IconBadge in the design system that was not implemented and includes only these two images, icon-success and icon-fail. I implemented it and renamed the images to match the state names in the design system.

---

desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx line 21 at r15 (raw file):

Previously, MarkusPettersson98 (Markus Pettersson) wrote…

Are these supposed to be redefined here, or should they be shared with Icon.tsx? 😊

Much better if they are shared, good suggestion, fixed!

[MarkusPettersson98]

🔥

Reviewed 51 of 51 files at r19, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved

---

desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx line 236 at r15 (raw file):

Previously, olmoh (Oliver Mohlin) wrote…

My reasoning was to separate images and icons, and only calling icons that are part of the icon section of our design system icons. The rest are images, but I can see this being confusing. But I noticed we have a component called IconBadge in the design system that was not implemented and includes only these two images, icon-success and icon-fail. I implemented it and renamed the images to match the state names in the design system.

Nice!

---

desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx line 21 at r15 (raw file):

Previously, olmoh (Oliver Mohlin) wrote…

Much better if they are shared, good suggestion, fixed!

🎉

[MarkusPettersson98]

Reviewed 2 of 3 files at r20, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved

---

ios/convert-assets.rb line 137 at r20 (raw file):

    rsvg_convert("--width=#{width}", "--height=#{height}", "--format=pdf", svg_file, "--output", output_file)
  end
end

Should asset_dir be an argument, or is only ever ICON_ASSETS_DIR necessary? 😊

Code quote:

def generate_resized_assets()
  RESIZE_ASSETS.each do |asset_name, resize_options|
    (new_asset_name, width, height) = resize_options

    svg_file = File.join(ICON_ASSETS_DIR, asset_name)
    image_name = pascal_case(File.basename(new_asset_name, ".svg"))
    output_dir = File.join(XCASSETS_DIR, "#{image_name}.imageset")

    if !Dir.exists?(output_dir)
      puts "Create directory #{output_dir}"
      Dir.mkdir(output_dir)
    end

    output_file = File.join(output_dir, "#{image_name}.pdf")

    puts "Convert and resize #{svg_file} -> #{output_file} (#{width} x #{height})"
    rsvg_convert("--width=#{width}", "--height=#{height}", "--format=pdf", svg_file, "--output", output_file)
  end
end